<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单全选及反选</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } div { width: 300px; border: solid 1px #000; padding: 20px 0; margin: 0 auto; } span { margin-right: 20px; } a { color: green; } </style> </head> <body> <div> <p> <input type="checkbox"> <span>全选</span> <a href="###">反选</a> </p> <p> <input type="checkbox">选项1 </p> <p> <input type="checkbox">选项2 </p> <p> <input type="checkbox">选项3 </p> <p> <input type="checkbox">选项4 </p> <p> <input type="checkbox">选项5 </p> </div> <script> //给标签增加类名 div.className = ''; //给所有的输入框都增加checked属性 // var inps = document.querySelectorAll('input'); // for( var i =0; i< inps.length; i++){ // if( i % 2 == 0 ){ // inps[i].checked = true; // } // } //效果：当点击全选按钮的时候，所有的选项都被选中 //span内容变成全不选 //span有两种内容，全选， 全不选 是根据全选按钮是否被选中而定 //效果：当点击反选按钮的时候，所有的选项取反值 //效果：当10个选项都被选中即(十个checked都为true)的时候， //全选被选中 var inpFirst = document.querySelector('input'); var inps = document.querySelectorAll('input'); var span = document.querySelector('span'); var fan = document.querySelector('a'); //全选 inpFirst.onclick = function() { // this.checked = true; for (var i = 1; i < inps.length; i++) { inps[i].checked = this.checked; } // if(this.checked) { // span.innerText = '全不选'; // } else { // span.innerText = '全选'; // } checkAll(); } //十个选项 //设置初始被选中的次数 for (var i = 1; i < inps.length; i++) { inps[i].onclick = function() { //检测选项中被选中的个数 // for(var j = 1, num = 0; j < inps.length; j++) { // if(inps[j].checked) { // num++; // } // // console.log(num); // } // inpFirst.checked = (inps.length - 1 == num); // if(inpFirst.checked) { // span.innerText = '全不选'; // } else { // span.innerText = '全选'; // } checkAll(); } } //反选 fan.onclick = function() { for (var i = 1; i < inps.length; i++) { inps[i].checked = !inps[i].checked; } checkAll(); } //封装 function checkAll() { for (var j = 1, num = 0; j < inps.length; j++) { if (inps[j].checked) { num++; } // console.log(num); } inpFirst.checked = (inps.length - 1 == num); if (inpFirst.checked) { span.innerText = '全不选'; } else { span.innerText = '全选'; } } checkAll(); </script> </body> </html>
