案例:全选与全不选及反选

Posted gengzhong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了案例:全选与全不选及反选相关的知识,希望对你有一定的参考价值。

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

技术分享图片

html结构代码:

<input class = ‘check‘ type="checkbox" >
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">
<input class = ‘check‘ type="checkbox">

<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">

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.length;i++){
checkList[i].checked = true;
}
}

//2.2 全不选
unCheckAll.onclick = function(){
//3.事件处理:不选中所有选择框(设置checked属性为false)
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = false;
}
}
//2.3 反选
reverseCheck.onclick = function(){
//3.事件处理:让每一个选择框的checked属性与自身相反
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = !checkList[i].checked;//逻辑非取反
// if (checkList[i].checked == true){
// checkList[i].checked = false;
// }else{//false
// checkList[i].checked = true;
// }
}
}
</script>

 
























































以上是关于案例:全选与全不选及反选的主要内容,如果未能解决你的问题,请参考以下文章

checkbox 的全选与全不选

全选与全不选

原生JavaScript实现checkbox全选与全不选

JS——全选与全不选

gridview中checkbox的全选与全不选

bootstrap表格结合anglarjs 含全选与全不选(-)