使用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！