使用jQuery设置元素选中的问题及解决办法

        现在界面操作的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！