js實現全選和全不選功能
本文實例為大家分享了js實現全選和全不選的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>操作復選框</title></head><body><input type='checkbox' id='quan'> 全選<br><input type='checkbox' name='aihao'>游戲<br><input type='checkbox' name='aihao'>睡覺<br></body></html><script type='text/javascript'> window.onload=function () { var firstChecbox = document.getElementById('quan'); var aihao=document.getElementsByName('aihao'); //完成全選和全不選 //當單擊全選時使下方的checkbox中的checked屬性為true firstChecbox.onclick=function () { //遍歷下方的checkbox //使每一個復選框的屬性中的checked和全選的屬性保持一致即可實現（不完善） for (let i = 0; i <aihao.length ; i++) { aihao[i].checked=firstChecbox.checked; } } //如果選中的數量和愛好的總數量一致的就把全選給選中，否則不全選 //為每一個aihao綁定單擊事件 var all=aihao.length; for (let i = 0; i < aihao.length; i++) { //綁定單擊事件 aihao[i].onclick=function () { //定義選中的數量 var checkedCount=0; for (let i = 0; i < aihao.length; i++) { //如果愛好選中就把選中的數量+1; if (aihao[i].checked){ checkedCount++; } //如果選中的數量和總數相當就把全選給勾選 if (checkedCount==all){ firstChecbox.checked=true } else{ firstChecbox.checked=false; } } } } }</script>
更多關于復選框的文章請點擊專題：javascript復選框操作匯總、jquery復選框操作匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. IntelliJ IDEA設置條件斷點的方法步驟2. IntelliJ Idea2017如何修改緩存文件的路徑3. IIS Express 取代 ASP.NET Development Server的配置方法4. 一篇文章帶你了解JavaScript-對象5. Express 框架中使用 EJS 模板引擎并結合 silly-datetime 庫進行日期格式化的實現方法6. Spring-Richclient 0.1.0 發布7. javascript設計模式 ? 建造者模式原理與應用實例分析8. HTML <!DOCTYPE> 標簽9. 淺談SpringMVC jsp前臺獲取參數的方式 EL表達式10. Python使用oslo.vmware管理ESXI虛擬機的示例參考
網公網安備