JavaScrip实现checkbox全选、全不选、反选功能
一、全选思路:
1、全选框未选中时,点击全选所有复选框被选中;
2、在全选状态下,有一个复选框未选中,则全选按钮未选中;
3、如果普通复选框全被选中,则全选按钮被选中;
二、反选思路:
1、点击反选时,所有被选中的复选框设为未选中,所有未选中复选框设为选中;
三、要点:
1、通过checked属性判断和设置checkbox的选中状态,true为选中,false未选中;
2、通过type属性判断对象是否为复选框;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <p> <input type="checkbox" id = "all">全选 <input type="checkbox" id="reverse">反选 </p> <p><input type="checkbox" class="check">1</p> <p><input type="checkbox" class="check">2</p> <p><input type="checkbox" class="check">3</p> <p><input type="checkbox" class="check">4</p> <p><input type="checkbox" class="check">5</p> <p><input type="checkbox" class="check">6</p> <script type="text/javascript"> window.onload = function(){ /* * 通过checked属性判断和设置checkbox的选中状态,true为选中,false未选中。 * type属性判断input标签的类型。 */ var all = document.getElementById("all"); var reverse = document.getElementById("reverse"); var oBox_group = document.getElementsByClassName("check"); // 全选框点击事件 all.onclick = function() { reverse.checked=false; // 清除反选框选中状态 // 遍历所有普通复选框 for (var index = 0; index < oBox_group.length; index++) { if (oBox_group[index].type=="checkbox") { // 将普通复选框的checked值等于全选框的checked值(全选或全不选) oBox_group[index].checked=all.checked; } } } // 普通复选框点击事件 for (var index = 0; index < oBox_group.length; index++) { // 为每个普通复选框绑定点击事件 oBox_group[index].onclick = function() { reverse.checked=false; // 清除反选框选中状态 var flag = true; // 设置标识元素 if (this.checked) { // 循环所以得普通复选框 for (var index = 0; index < oBox_group.length; index++) { // 判断是否存在一个复选框没有被选中,如果有则将标识flag设为true,并退出循环 if (oBox_group[index].type=="checkbox" && oBox_group[index].checked==false) { flag = false; break; } } all.checked = flag; // 将标识元素值赋给全选框,如果所有元素被选中,为flag = true } else { all.checked = false; // 如果点击的复选框checked=false,则全选框的checked=false } } } // 反选框点击事件 reverse.onclick = function() { all.checked=false; // 清除全选框选中状态 // 遍历所有普通复选框 for (var index = 0; index < oBox_group.length; index++) { if (oBox_group[index].type=="checkbox") { // checked=true的复选框设为false,checked=false的复选框设为true oBox_group[index].checked=oBox_group[index].checked?false:true; } } } } </script> </body> </html>