通过点击按钮 对多选框进行选择。
先简单的把按钮写上
联动全选就是如果下面的多选框全部选上了,他就自动选上,在这里我用JavaScript封装成了一个函数,
在点击全选和全不选、反选的时候检查一遍是否全选,然后再每个按钮里面调用,使联动的效果更全面。
<style>
* {
margin: 0;
padding: 0;
list-style: none;
/*清除a标签的下划线*/
text-decoration: none;
/*清除点击边框之后的边框*/
outline: none;
}
.radio{
width: 500px;
height: 200px;
}
</style>
<body>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<button id="btn3">反选</button>
<!--联动选择-->
<input type="checkbox" name="" id="btn4">
<div class="radio">
<input type="checkbox" name="" >
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
JavaScript的代码,首先是获取botton和input的值,这里需要注意的是,我联动选择也是input,再下面的input我用一个div框起来的,就先获取div标签的className,然后再获取div里面的input值
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oBtn4 = document.getElementById('btn4')
var oInp = document.getElementsByClassName('radio')[0];
var oInput = oInp.getElementsByTagName('input')
封装一个判断下面按钮是否全部选上,如果全部选中,联动按钮就会自动选中,没有全部选中的话,联动按钮就不会选中。
//封装一个判断、联动的函数
function panDuan() {
var n=0; //设置一个初始的计数的值
for(var j=0;j<oInput.length;j++){//循环判断每个按钮是否是选中状态
if(oInput[j].checked==true){//如果是选中的计数值加一
n++;
}
}
// console.log(n);
// console.log(oInput.length)
// console.log(n == oInput.length)
if(n == oInput.length){//循环结束判断统计的值和按钮的总数是否相同
oBtn4.checked=true; //相同就确定下面全部选中了,上面的也要选中
}else{
oBtn4.checked=false;
}
}
全选按钮,循环获取每个input使得他们的checked属性都是true
//全选
oBtn1.onclick= function () {
for (var i = 0 ; i <oInput.length ; i++){
oInput[i].checked = true;
}
//判断按钮是true还是false
panDuan();
}
全不选按钮,循环获取每个input使得他们的checked属性都是false
//全不选
oBtn2.onclick= function () {
for (var i = 0 ; i < oInput.length; i++){
oInput[i].checked = false;
}
panDuan();
}
// console.log(oInput[0].checked)
反选
//反选
oBtn3.onclick = function () {
for (var i = 0 ; i < oInput.length; i++){
console.log(i);
// if(oInput[i].checked == true){
// console.log(oInput[i].checked)
// oInput[i].checked = false;
// }
switch (oInput[i].checked) {
case false:
oInput[i].checked = true;
break;
case true:
oInput[i].checked = false;
}
}
panDuan();
}
联动全选
//联动全选
oBtn4.onclick=function () {
/*判断他是选中还是没选中*/
if (this.checked == true) {
//如果选中,下面全部选中
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked = true;
}
} else {
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked = false;
}
}
// panDuan();
}
for(var i=0;i<oInput.length;i++){//循环给每一个按钮加点击事件
oInput[i].onclick=function () {
panDuan();
}
}
</script>