在我們的程序開發中經常會要用到CheckBox的全選，通常情況下是在一些數據綁定控件中如Gridview等
下面以Repeater為例，在Repeater的header 和item中放入CheckBox控件 。
<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的全選和取消全選的。
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 選中的個數 這個在用來判斷 是否有勾選時非常有用。
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;} 以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
