js實(shí)現(xiàn)全選和全不選功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)全選和全不選的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>操作復(fù)選框</title></head><body><input type='checkbox' id='quan'> 全選<br><input type='checkbox' name='aihao'>游戲<br><input type='checkbox' name='aihao'>睡覺(jué)<br></body></html><script type='text/javascript'> window.onload=function () { var firstChecbox = document.getElementById('quan'); var aihao=document.getElementsByName('aihao'); //完成全選和全不選 //當(dāng)單擊全選時(shí)使下方的checkbox中的checked屬性為true firstChecbox.onclick=function () { //遍歷下方的checkbox //使每一個(gè)復(fù)選框的屬性中的checked和全選的屬性保持一致即可實(shí)現(xiàn)（不完善） for (let i = 0; i <aihao.length ; i++) { aihao[i].checked=firstChecbox.checked; } } //如果選中的數(shù)量和愛(ài)好的總數(shù)量一致的就把全選給選中，否則不全選 //為每一個(gè)aihao綁定單擊事件 var all=aihao.length; for (let i = 0; i < aihao.length; i++) { //綁定單擊事件 aihao[i].onclick=function () { //定義選中的數(shù)量 var checkedCount=0; for (let i = 0; i < aihao.length; i++) { //如果愛(ài)好選中就把選中的數(shù)量+1; if (aihao[i].checked){ checkedCount++; } //如果選中的數(shù)量和總數(shù)相當(dāng)就把全選給勾選 if (checkedCount==all){ firstChecbox.checked=true } else{ firstChecbox.checked=false; } } } } }</script>
更多關(guān)于復(fù)選框的文章請(qǐng)點(diǎn)擊專題：javascript復(fù)選框操作匯總、jquery復(fù)選框操作匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫(huà)水平條形圖案例2. JSP動(dòng)態(tài)實(shí)現(xiàn)web網(wǎng)頁(yè)登陸和注冊(cè)功能3. python 如何停止一個(gè)死循環(huán)的線程4. 關(guān)于HTML5的img標(biāo)簽5. python 爬取嗶哩嗶哩up主信息和投稿視頻6. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效7. ASP.NET MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值8. php5.6不能擴(kuò)展redis.so的解決方法9. Java 基于UDP協(xié)議實(shí)現(xiàn)消息發(fā)送10. PHP獲取時(shí)間戳等相關(guān)函數(shù)匯總
網(wǎng)公網(wǎng)安備