javascript中CheckBox全選終極方案

 　　在javascript頁面中實現CheckBox或者Radio的選中狀態是一件很容易的事情，下面我們來給大家展示下在asp.net中使用javascript中CheckBox全選終極方案，有需要的小伙伴可以參考下。

　　在我們的程序開發中經常會要用到CheckBox的全選，通常情況下是在一些數據綁定控件中如Gridview等

　　下面以Repeater為例，在Repeater的header 和item中放入CheckBox控件 。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1" > <tr> <td width="3%" align="center" > <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" onclick="checkAll ('chkAll',this);" /> </td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td align="center" > <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' onclick="checkAll('chkAll',this);"/> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater>

　　下面就是js腳本了

　　checkAll方法是實現CheckBox的全選和取消全選的。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function checkAll(chkAllID, thisObj) { var chkAll = document.getElementById(chkAllID); var chks = document.getElementsByTagName("input"); var chkNo = 0; var selectNo = 0; for (var i = 0; i < chks.length; i++) { if (chks[i].type == "checkbox") { //全選觸發事件 if (chkAll == thisObj) { chks[i].checked = thisObj.checked; } //非全選觸發 else { if (chks[i].checked && chks[i].id != chkAllID) selectNo++; } if (chks[i].id != chkAllID) { chkNo++; } } } if (chkAll != thisObj) { chkAll.checked = chkNo == selectNo; } }

　　checkSelectNo 函數是用來獲取 所有checkbox 選中的個數 這個在用來判斷 是否有勾選時非常有用。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 function checkSelectNo(chkAllID) { var chks = document.getElementsByTagName("input"); var selectNo = 0; for (var i = 0; i < chks.length; i++) { if (chks[i].type == "checkbox") { if (chks[i].id != chkAllID && chks[i].checked) { selectNo++; } } } return selectNo; }

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。