现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的select的option的选中。
前段时间,公司开始了一个项目,里面就用到了jquery和jquery-ui,里面正好就有“全选”功能和多选模式的select,下面就来说说这里面遇到的坑。
由于要兼容IE10的版本,所以只能用1.X的版本,然后又用了jquery-ui,所以最终定的版本就是1.11.4.
这里面遇到的坑,其实都是由于一个原因引起的————使用了错误的方法!
表现出来的现象是这样子的:
(用checkbox做“全选”举例哈)加载页面后,设置checkbox的“checked”属性为true
$(".list_checkbox").attr("checked", $(this).is(":checked"));
设置之后呢,就是符合预期的,通过firebug查看界面的及时html代码,可以看到,其实是在checkbox中加了
checked="checked"
然后取消“全选”,就把这个去掉了,也就取消了选中状态,这很好理解,到目前为止都还是符合预期的。
但是接下来就不知道是怎么回事了,再次点击“全选”,在html代码的checkbox中也确实添加了
checked="checked"
但是却没有表现出来“选中”的效果,单独去点击选中也是可以选中的。
相似的现象还会出现在开启了“多选”模式的select的option的选中的时候。
解决办法,在网上查阅了一下,原来是用错了方法!!
不应该使用attr()方法,而应该使用prop()方法,这个修改是在1.6开始的。详细的介绍可以参考一下:jquery无法设置checkbox选中即没有变成选中状态
这里来贴一下“全选”的代码:
// “全选”checkbox $(".list_checkall").click(function() { $(".list_checkbox").prop("checked", $(this).is(":checked")); }); // 子复选框勾选情况对全选勾选框的影响 $(".list_checkbox").click(function() { // 有一个没有选中则取消全选 if (!this.checked) { $(".list_checkall").prop("checked", false); return; } // 选中的数目和总数目相等,加上全选 var chsub = $(".list_checkbox").length; var checkedsub = $(".list_checkbox:checked").length; if (checkedsub == chsub) { $(".list_checkall").prop("checked", true); } });
“全选”的checkbox设置class为“list_checkall”,其他的需要被选择的checkbox设置class为“list_checkbox”。这个处理还会对checkbox已经被选中的数目进行判断处理,在全部都分别选中之后自动选中“全选”的checkbox;同理,在“全选”之后,取消某一个的选中状态,也会取消“全选”的选中。
对于select,开启“多选”模式
<select multiple="multiple" class="select_chosen" name="speakerIDs[]"></select>
里面的option使用其他的js添加,提交时,为了确保这个select里面的option都会被提交,需要将所有的option设置为“选中”,使用的语句为
$(".select_chosen option").prop("selected",true);
有点乱,想到哪里写到哪里了,大家将就看吧,不好意思哈!
enjoy!