js实现CheckBox单选多选全选功能
在checkbox的使用中,我们经常遇到需要全选或者单选的情况,通过js定义函数可以方便实现需求,提高用户体验感。
定义多个CheckBox
<div>
<input type="checkbox" id="all" @click="checkAll">
<label for="all">全选</label>
<br><hr>
<input id="checkbox1" type="checkbox" class="chBox" @click="checkOne">
<label for="checkbox1">篮球</label>
<input id="checkbox2" type="checkbox" class="chBox" @click="checkOne">
<label for="checkbox2">足球</label>
<input id="checkbox3" type="checkbox" class="chBox" @click="checkOne">
<label for="checkbox3">羽毛球</label>
<input id="checkbox4" type="checkbox" class="chBox" @click="checkOne">
<label for="checkbox4">乒乓球</label>
</div>
定义响应的函数体
methods: {
//全选按钮的点击事件
checkAll(){
//获取id的dom元素
let Id = document.getElementById('all');
//获取类名为chBox的dom元素
let chBox = document.getElementsByClassName('chBox');
let len = chBox.length;
//输出观察
console.log(Id.checked);
console.log(chBox);
for(let i=0;i<len;i++){
//当全选按钮为true时,全部按钮都为true,否则相反
if(Id.checked){
chBox[i].checked=true;
}
else {
chBox[i].checked=false;
}
}
},
//单个按钮的点击事件
checkOne(){
let count=0;
let chBox = document.getElementsByClassName('chBox');
let len = chBox.length;
for(let i=0;i<len;i++){
//记录单选按钮为true的数量
if(chBox[i].checked){
count++;
}
}
//当单选按钮都为true时,全选按钮也为true,否则为false
if(count==len){
document.getElementById('all').checked = true;
}else {
document.getElementById('all').checked = false;
}
}
}
效果
点击全选按钮时,其他按钮都为true
取消其中一个,全选按钮为false
|