复选框全选 | 易学教程

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>复选框</title>

  <style type="text/css">

  </style>
</head>

<body>
<input type="checkbox" id="boxid" οnclick="setAllNo()" />全选/全不选
<br />
<input type="checkbox" name="love" />篮球
<br />
<input type="checkbox" name="love" />排球
<br />
<input type="checkbox" name="love" />羽毛球
<br />
<input type="checkbox" name="love" />乒乓球
<br />
<input type="button" value="全选" οnclick="setAll()" />
<input type="button" value="全不选" οnclick="setNo()" />
<input type="button" value="反选" οnclick="setOthers()" />

<script type="text/javascript">
  //全选/全不选操作
  function setAllNo(){
    var box = document.getElementById("boxid");
    var loves = document.getElementsByName("love");
    if(box.checked == false){
      for (var i = 0; i < loves.length; i++) {
        loves[i].checked = false;
      }
    }else{
      for (var i = 0; i < loves.length; i++) {
        loves[i].checked = true;
      }
    }
  }
  //全选函数
  function setAll() {
    var loves = document.getElementsByName("love");
    for (var i = 0; i < loves.length; i++) {
      loves[i].checked = true;
    }
  }

  //全不选函数
  function setNo() {
    var loves = document.getElementsByName("love");
    for (var i = 0; i < loves.length; i++) {
      loves[i].checked = false;
    }
  }

  //反选
  function setOthers() {
    var loves = document.getElementsByName("love");
    for (var i = 0; i < loves.length; i++) {
      if (loves[i].checked == false)
        loves[i].checked = true;
      else
        loves[i].checked = false;
    }
  }

</script>

</body>

</html>
来源：CSDN
作者：九亿宅男的梦
链接：https://blog.csdn.net/Guoyu1_/article/details/103604969
标签
复选框