lovecoding
/
VIP33


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


  <button id="all" >全选</button>
  <button id="fx" >反选</button>

  <input class="cbx"   name="cb"  type="checkbox"   > 1
  <input class="cbx"  name="cb" type="checkbox"   > 2
  <input class="cbx"  name="cb" type="checkbox"   > 3
  <input class="cbx"  type="checkbox"   > 4

</body>
<script>
  //点击按钮出发的函数
  document.getElementById("all").onclick = function (){

    //`getElementsByTagName()`：根据标签名称获取，返回Element对象数组
    //let insArr = document.getElementsByTagName("input");
    //`getElementsByName()`：根据name属性值获取，返回Element对象数组
    //let insArr = document.getElementsByName("cb");
    //`getElementsByClassName()`：根据class属性值获取，返回Element对象数组
    let insArr = document.getElementsByClassName("cbx");
    //console.log(insArr)

    for (let i = 0; i < insArr.length ; i++) {
        //选中 属性 checked  true
        insArr[i].checked = true;
    }
  }

  //点击按钮出发的函数
  document.getElementById("fx").onclick = function (){


    let insArr = document.getElementsByClassName("cbx");
    //console.log(insArr)

    for (let i = 0; i < insArr.length ; i++) {
      //选中 属性 checked  true
      insArr[i].checked = !insArr[i].checked;
    }
  }

</script>