Jquery 實現(xiàn)checkbox全選方法

更新時間：2015年01月28日 10:26:39 投稿：hebedich

本文主要向大家展示了一段使用jQuery實現(xiàn)checkbox全選的方法，以及編寫此方法的背景和過程，非常詳細，這里推薦給小伙伴們。

昨天早上有寫到怎么利用Jquery實現(xiàn)全選

根據(jù)大家的意見對程序中一些寫法不好的地方進行了修改，也是本人水平有限，存在各種考慮不到的地方。

文章最后我提出了一個問題，要寫一個通用的方法來調(diào)用，于是就有了現(xiàn)在的這篇文章，晚上回到家，我就寫出了效果

下面的例子可以供大家討論學(xué)習(xí)，如果覺得不錯也可以直接應(yīng)用到項目中。

1：為什么要寫這個方法

網(wǎng)上實現(xiàn)一句話全選全不選的有很多，但是好像都忽略了一個問題，全選的checkbox可以控制下面的子checkbox，但是下面的子checkbox應(yīng)該也可以控制上面的全選，這樣就有了我的這個方法。

2：開發(fā)過程：要實現(xiàn)通用就要解決2個問題，怎么分組，怎么判斷組里面哪個checkbox為全選，我想了想，覺得用name分組可以，

用class來判斷是否是需要全選的checkbox組。先找到所有class為需要全選的，再找出name屬性，根據(jù)name屬性就可以找到其他的子checkbox,只要找到元素就可以進行操作了

3：文件，下面是我實現(xiàn)的js，保存為xs_checkbox_all.js

復(fù)制代碼代碼如下:

$(document).ready(function () {

    var xsChk = "xsChk";//定義的樣式

    var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定義此樣式的checkbox

    $(xsChkAll).each(function () {

        var name = $(this).attr("name");

        name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全選框下面的子checkbox

        $(this).click(function () {

            $(name).attr("checked", $(this)[0].checked);

        })

        var xschk = $(this);

        $(name).click(function () {

            var IAll = $(name).length; //此子項目下所有checkbox的個數(shù)

            var IChk = $(name + ":checked").length; //此子項目下所有勾選checkbox的個數(shù)

            var isAllChecked = true; //是否是全選

            if (IAll != IChk) {

                isAllChecked = false;

            }

            $(xschk).attr("checked", isAllChecked);

        });

    });

});