js实现CheckBox单选多选全选功能

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