首頁 > web前端 > js教程 > Jquery 實作checkbox全選方法_jquery

Jquery 實作checkbox全選方法_jquery

WBOY
發布: 2016-05-16 16:17:47
原創
1081 人瀏覽過

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

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

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

下面的範例可以供大家討論學習,如果覺得不錯也可以直接應用在專案中。

1:為什麼要寫這個方法

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

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

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

3:文件,以下是我實作的js,儲存為xs_checkbox_all.js

複製程式碼 程式碼如下:

$(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);
        });
    });
});

頁面使用

複製程式碼 程式碼如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

    標題>
頭>

    http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    腳本>
   
   
        全選一個圖例>
       
        全選
   

       
        1

       
        2

       
        3

       
        4

   

   
   
        全選二圖例>
       
        全選2
   

       
        11

       
        22

       
        33

       
        44
>
   

   
身體>

可以達到效果,如果有什麼優化的地方,請大家提出,我會做的更好,謝謝大家了,以上就是全文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板