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. 效果：
纯js实现checkbox的全选、反选、全不选
原文地址：http://blog.51cto.com/12173069/2103570