需求:
1.当all选项勾选时,所有选项都被勾选,反正当所有选项被选中时,全选选项自动选中
2.点击反选按钮时,被选中的选项取消选中,未被选中的选项被选中
Html结构
all
反选
首先,我们得到我们要控制的元素,并且用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
}//代码效果参考:http://www.ezhiqi.com/zx/art_998.html
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
}//代码效果参考:http://www.ezhiqi.com/zx/art_6706.html
}
}
————————————————————————————————————————————————————————————————————————————
完整代码
<!DOCTYPE html
[/span>html
[/span>head lang="en"
[/span>meta charset="UTF-8"
[/span>title
[/span>body
[/span>input type="checkbox"
[/span>input type="checkbox"
[/span>input type="checkbox"
[/span>input type="checkbox"
[/span>input type="checkbox"
[/span>input type="checkbox"
all[/span>input id="all" type="checkbox" onclick="check()"
[/span>button type="button" onclick="fanx()"
[/span>script type="text/javascript"
var all=document.getElementById("all")
var box=document.getElementsByTagName("input")
for (i = 0; i [/span> box.length-1; i++) {
box【i】.onclick = onclike
}
//通过变量j来计算有多少选项被选中,如果被选中的个数等于总个数,则全选的checked属性为true
function onclike2() {
var j=0
for (i = 0; i [/span> 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 [/span> box.length - 1; i++) {
var ifChecke = box【i】.checked
flag = flag ifChecke
}
all.checked=flag
}
function check() {
for (i = 0; i [/span> box.length-1; i++) {
box【i】.checked = all.checked
}
}
function fanx(){
for (i = 0; i [/span> box.length-1; i++)
{
if(box【i】.checked){
box【i】.checked=false
}
else
{
box【i】.checked=true
}
}
}