php实现全选_全不选_,JS实现的全选、全不选及反选功能【案例】

本文实例讲述了JS实现的全选、全不选及反选功能。分享给大家供大家参考，具体如下：

效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.

html结构代码:

javascript代码如下:

/*一：需求分析：

(1)点击全选：选中所有选择框(设置checked属性为true)

(2)点击全不选：不选中所有选择框(设置checked属性为false)

(3)点击反选：让每一个选择框的checked属性与自身相反

二：思路分析

1.获取元素

2.注册事件

3.事件处理

*/

//1.获取页面元素

var checkAll = document.getElementById('checkAll');//全选

var unCheckAll = document.getElementById('unCheckAll');//全不选

var reverseCheck = document.getElementById('reverseCheck');//反选

var checkList = document.getElementsByClassName('check');//选择框列表

//2.注册事件

//2.1 全选

checkAll.onclick = function(){

//3.事件处理：选中所有选择框(设置checked属性为true)

for(var i = 0;i

checkList[i].checked = true;

}

}

//2.2 全不选

unCheckAll.onclick = function(){

//3.事件处理:不选中所有选择框(设置checked属性为false)

for(var i = 0;i

checkList[i].checked = false;

}

}

//2.3 反选

reverseCheck.onclick = function(){

//3.事件处理:让每一个选择框的checked属性与自身相反

for(var i = 0;i

checkList[i].checked = !checkList[i].checked;//逻辑非取反

// if (checkList[i].checked == true){

// checkList[i].checked = false;

// }else{//false

// checkList[i].checked = true;

// }

}

}

完整示例代码如下：

www.jb51.net JS全选、全不选、反选

/*一：需求分析：

(1)点击全选：选中所有选择框(设置checked属性为true)

(2)点击全不选：不选中所有选择框(设置checked属性为false)

(3)点击反选：让每一个选择框的checked属性与自身相反

二：思路分析

1.获取元素

2.注册事件

3.事件处理

*/

//1.获取页面元素

var checkAll = document.getElementById('checkAll');//全选

var unCheckAll = document.getElementById('unCheckAll');//全不选

var reverseCheck = document.getElementById('reverseCheck');//反选

var checkList = document.getElementsByClassName('check');//选择框列表

//2.注册事件

//2.1 全选

checkAll.onclick = function(){

//3.事件处理：选中所有选择框(设置checked属性为true)

for(var i = 0;i

checkList[i].checked = true;

}

}

//2.2 全不选

unCheckAll.onclick = function(){

//3.事件处理:不选中所有选择框(设置checked属性为false)

for(var i = 0;i

checkList[i].checked = false;

}

}

//2.3 反选

reverseCheck.onclick = function(){

//3.事件处理:让每一个选择框的checked属性与自身相反

for(var i = 0;i

checkList[i].checked = !checkList[i].checked;//逻辑非取反

// if (checkList[i].checked == true){

// checkList[i].checked = false;

// }else{//false

// checkList[i].checked = true;

// }

}

}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。