純js實現(xiàn)checkbox的全選、反選、全不選
標簽：
JavaScript
分开：
a. 代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><input type="checkbox" id="check_all">全选<input type="checkbox" id="un_check_all">全不选<input type="checkbox" id="un_check">反选<br><input type="checkbox"> <br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><script>var check_all = document.getElementById('check_all');var un_check_all = document.getElementById('un_check_all');var un_check = document.getElementById('un_check');var checkbox = document.getElementsByTagName('input');var arr = new Array('check_all','un_check_all','un_check')function testCheck(){var bool = false;for (var i=0;i<checkbox.length;i++){ if(!(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1))){ if(checkbox[i].checked){ bool = true; break; } }}return bool;}function checkAll(){for (var i=0;i<checkbox.length;i++){ if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){ if(checkbox[i].getAttribute('id')=='check_all'){ console.log(1) checkbox[i].checked = true }else{ checkbox[i].checked = false } }else{ checkbox[i].checked = true }}}function unCheckAll(){for (var i=0;i<checkbox.length;i++){ if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){ if(checkbox[i].getAttribute('id')=='un_check_all'){ console.log(2) checkbox[i].checked = true }else{ checkbox[i].checked = false } }else{ checkbox[i].checked = false }}}function unCheck(){for (var i=0;i<checkbox.length;i++){ if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){ if(checkbox[i].getAttribute('id')=='un_check'){ console.log(3) checkbox[i].checked = true }else{ checkbox[i].checked = false } }else{ if(checkbox[i].checked == true){ checkbox[i].checked = false }else{ checkbox[i].checked = true } }}}check_all.onclick = function(){ checkAll() }un_check_all.onclick = function(){ unCheckAll() }un_check.onclick = function(){ unCheck() }</script></body></html>b. 效果：
合并：
a. 代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><input type="checkbox" id="toggle_check">全选/全不选<br><input type="checkbox"> <br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><br><input type="checkbox"><script>var toggle_check = document.getElementById('toggle_check');var checkbox = document.getElementsByTagName('input');function testCheck(){var bool = false;for (var i=0;i<checkbox.length;i++){ if(!(checkbox[i].hasAttribute('id') && checkbox[i].getAttribute('id') == 'toggle_check')){ if(checkbox[i].checked){ bool = true; break; } }}return bool;}function checkAll(){for (var i=0;i<checkbox.length;i++){ checkbox[i].checked = true}}function unCheckAll(){for (var i=0;i<checkbox.length;i++){ checkbox[i].checked = false}}toggle_check.onclick = function(){ var bool = testCheck() if(bool){ unCheckAll() }else{ checkAll() } }</script></body></html>b. 效果：
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦