In unserer Programmentwicklung verwenden wir häufig CheckBox, um alles auszuwählen, normalerweise in einigen datengebundenen Steuerelementen wie Gridview usw.
Im Folgenden wird Repeater als Beispiel verwendet und das CheckBox-Steuerelement in den Header und das Element von Repeater eingefügt.
<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>
Das Folgende ist das js-Skript
Die checkAll-Methode implementiert die gesamte Auswahl und Abwahl von 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; } }
Die Funktion checkSelectNo wird verwendet, um die Anzahl der ausgewählten Kontrollkästchen zu ermitteln. Dies ist sehr nützlich, wenn festgestellt werden soll, ob ein Kontrollkästchen vorhanden ist.
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; }
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.