javascript中CheckBox全選終極方案
在我們的程序開發(fā)中經(jīng)常會(huì)要用到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方法是實(shí)現(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 選中的個(gè)數(shù) 這個(gè)在用來判斷 是否有勾選時(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; }
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- 比較全的JS checkbox全選、取消全選、刪除功能代碼
- js checkbox全選并將獲取值放到input里邊
- Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
- javaScript checkbox 全選/反選及批量刪除
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- Javascript實(shí)現(xiàn)CheckBox的全選與取消全選的代碼
- Gridview使用CheckBox全選與單選采用js實(shí)現(xiàn)同時(shí)高亮顯示選擇行
- 實(shí)現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常
- js實(shí)現(xiàn)checkbox全選和反選示例
- javascript實(shí)現(xiàn)checkBox的全選,反選與賦值
- javascript實(shí)現(xiàn)checkbox全選的代碼
- javascript使用avalon綁定實(shí)現(xiàn)checkbox全選
相關(guān)文章
JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法,每種方法都與眾不同,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-12JavaScript數(shù)組特性與實(shí)踐應(yīng)用深入詳解
這篇文章主要介紹了JavaScript數(shù)組特性與實(shí)踐應(yīng)用,較為深入而詳細(xì)的分析了javascript數(shù)組的功能、屬性、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09js與jquery正則驗(yàn)證電子郵箱、手機(jī)號(hào)、郵政編碼的方法
這篇文章主要介紹了js與jquery正則驗(yàn)證電子郵箱、手機(jī)號(hào)、郵政編碼的方法,涉及javascript與jQuery鼠標(biāo)事件的響應(yīng)與正則驗(yàn)證操作字符串的相關(guān)技巧,需要的朋友可以參考下2016-07-07微信小程序?qū)W習(xí)(4)-系統(tǒng)配置app.json詳解
我們使用app.json文件來對(duì)微信小程序進(jìn)行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。2017-01-01Javascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程
低代碼作為開發(fā)工具類的產(chǎn)品,需要有從0到1體系化的教程才可以,而且還得有教師進(jìn)行輔助。否則,學(xué)習(xí)低代碼是有難度的,入門很難。因?yàn)榇蠹伊?xí)慣了用代碼編程,一下子過度到可視化編程,有一個(gè)思路上的轉(zhuǎn)變2022-08-08