标签：
需求：
1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中
2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中
Html结构
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
all<input id="all" type="checkbox" onclick="check()">
<button type="button" onclick="fanx()">反选</button>
首先，我们得到我们要控制的元素，并且用for循环给每个checkbox绑定点击事件：
var all=document.getElementById("all")
var box=document.getElementsByTagName("input") //此处选中了所有的input,包括全选按钮本身，在后面的操作中需要注意
for (i = 0; i < box.length-1; i++) {
box[i].onclick = onclike
}
1.全选
分析：我们让每个checkbox的checked属性都等于全选的checked属性，则可实现全选和全不选的操作，代码如下：
function check() {
for (i = 0; i < box.length-1; i++) {
box[i].checked = all.checked
}
}
2.反向全选
分析：
方案一：通过变量j来计算有多少选项被选中，如果被选中的个数等于总个数，则全选的checked属性为true，代码如下：
function onclike() {
var j=0
for (i = 0; i < box.length - 1; i++) {
if (box[i].checked) {
j++
}
}
all.checked=(j==box.length-1)
/*if(j==box.length-1)
{
all.checked=true
}
else
{
all.checked=false
}*/
}
方案二：只要有一个选项未被选择中，则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较，代码如下：
function onclike()
{
var flag=true
for (i = 0; i < box.length - 1; i++) {
var ifChecke = box[i].checked
flag = flag && ifChecke
}
all.checked=flag
}
3.反选
分析：当checked为true为真时，使其为false,否则为true,代码如下：
function fanx(){
for (i = 0; i < box.length-1; i++)
{
if(box[i].checked){
box[i].checked=false
}
else
{
box[i].checked=true
}
}
}
————————————————————————————————————————————————————————————————————————————
完整代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> all<input id="all" type="checkbox" onclick="check()"> <button type="button" onclick="fanx()">反选</button> </body> <script type="text/javascript"> var all=document.getElementById("all") var box=document.getElementsByTagName("input") for (i = 0; i < box.length-1; i++) { box[i].onclick = onclike } //通过变量j来计算有多少选项被选中，如果被选中的个数等于总个数，则全选的checked属性为true function onclike2() { var j=0 for (i = 0; i < box.length - 1; i++) { if (box[i].checked) { j++ } } all.checked=(j==box.length-1) /*if(j==box.length-1) { all.checked=true } else { all.checked=false }*/ } //只要有一个选项未被选择中，则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较 function onclike() { var flag=true for (i = 0; i < box.length - 1; i++) { var ifChecke = box[i].checked flag = flag && ifChecke } all.checked=flag } function check() { for (i = 0; i < box.length-1; i++) { box[i].checked = all.checked } } function fanx(){ for (i = 0; i < box.length-1; i++) { if(box[i].checked){ box[i].checked=false } else { box[i].checked=true } } } </script> </html>
标签：
原文地址：http://www.cnblogs.com/rocking/p/4713547.html
