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，否则为falseif(count==len){document.getElementById('all').checked = true;}else {document.getElementById('all').checked = false;}}}
效果
点击全选按钮时，其他按钮都为true
取消其中一个，全选按钮为false
