javascript中CheckBox全選終極方案
在我們的程序開發(fā)中經(jīng)常會要用到CheckBox的全選,通常情況下是在一些數(shù)據(jù)綁定控件中如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方法是實現(xiàn)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") { //全選觸發(fā)事件 if (chkAll == thisObj) { chks[i].checked = thisObj.checked; } //非全選觸發(fā) else { if (chks[i].checked && chks[i].id != chkAllID) selectNo++; } if (chks[i].id != chkAllID) { chkNo++; } } } if (chkAll != thisObj) { chkAll.checked = chkNo == selectNo; } }
checkSelectNo 函數(shù)是用來獲取 所有checkbox 選中的個數(shù) 這個在用來判斷 是否有勾選時非常有用。
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; }
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- 比較全的JS checkbox全選、取消全選、刪除功能代碼
- js checkbox全選并將獲取值放到input里邊
- Javascript 實現(xiàn)TreeView CheckBox全選效果
- javaScript checkbox 全選/反選及批量刪除
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- Javascript實現(xiàn)CheckBox的全選與取消全選的代碼
- Gridview使用CheckBox全選與單選采用js實現(xiàn)同時高亮顯示選擇行
- 實現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常
- js實現(xiàn)checkbox全選和反選示例
- javascript實現(xiàn)checkBox的全選,反選與賦值
- javascript實現(xiàn)checkbox全選的代碼
- javascript使用avalon綁定實現(xiàn)checkbox全選
相關(guān)文章
JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法,每種方法都與眾不同,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧2016-12-12JavaScript數(shù)組特性與實踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript數(shù)組特性與實踐應(yīng)用,較為深入而詳細的分析了javascript數(shù)組的功能、屬性、使用方法及操作注意事項,需要的朋友可以參考下2018-12-12微信小程序?qū)W習(4)-系統(tǒng)配置app.json詳解
我們使用app.json文件來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。2017-01-01Javascript的動態(tài)增加類的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動態(tài)增加類的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10