Jquery學習之路(一) 實現checkbox全選方法


昨天早上有寫到怎么利用Jquery實現全選

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

文章最后我提出了一個問題,要寫一個通用的方法來調用,於是就有了現在的這篇文章,晚上回到家,我就寫出了效果

下面的例子可以供大家討論學習,如果覺得不錯也可以直接應用到項目中。

1:為什么要寫這個方法

   網上實現一句話全選全不選的有很多,但是好像都忽略了一個問題,全選的checkbox可以控制下面的子checkbox,但是下面的子checkbox應該也可以控制上面的全選,這樣就有了我的這個方法。

2:開發過程:要實現通用就要解決2個問題,怎么分組,怎么判斷組里面哪個checkbox為全選,我想了想,覺得用name分組可以,

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

3:下載地址:實現checkbox全選方法.zip

4:文件,下面是我實現的js,保存為xs_checkbox_all.js

//****************************************************************************************
//作者:輕狂書生
//博客地址:http://www.cnblogs.com/xiaoshuai1992
//create: 2014/1/15
//功能:實現checkbox的智能全選
//使用方法:引用jquery,設置要全選的checkbox 組name一樣,全選的checkbox設置class為下面變量xsChk
//*****************************************************************************************

$(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的個數
            var IChk = $(name + ":checked").length; //此子項目下所有勾選checkbox的個數
            var isAllChecked = true; //是否是全選
            if (IAll != IChk) {
                isAllChecked = false;
            }
            $(xschk).attr("checked", isAllChecked);
        });

    });
});

頁面使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    </script>
    <script src="xs_checkbox_all.js" type="text/javascript"></script>
    <fieldset>
        <legend>全選one</legend>
        <input type="checkbox" class="xsChk" name="chk" />
        全選
    <div>
        <input type="checkbox" name="chk" />
        1<br />
        <input type="checkbox" name="chk" />
        2<br />
        <input type="checkbox" name="chk" />
        3<br />
        <input type="checkbox" name="chk" />
        4<br />
    </div>
    </fieldset>
    <fieldset>
        <legend>全選two</legend>
        <input type="checkbox" class="xsChk" name="chk1" />
        全選2
    <div>
        <input type="checkbox" name="chk1" />
        11<br />
        <input type="checkbox" name="chk1" />
        22<br />
        <input type="checkbox" name="chk1" />
        33<br />
        <input type="checkbox" name="chk1" />
        44<br />
    </div>
    </fieldset>
</body>
</html>

可以達到效果,如果有什么優化的地方,請大家提出,我會做的更好,謝謝大家了

關注公眾號

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2023 CODEPRJ.COM