文章目录

1、代码实现

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
  </head>

  <body>

    <script type="text/javascript">.onload = function() {
        var first = document.getElementById("first"); //获取
        var aihaos = document.getElementsByName("A"); //通过name获取
        first.onclick = function() {
          for(var i = 0; i < aihaos.length; i++) {
            aihaos[i].checked = first.checked;
          }

        }

        //当复选框全部选中的时候第一个复选框才会显示选中
        var all = aihaos.length;
        for(var i = 0; i < aihaos.length; i++) {
          aihaos[i].onclick = function() {
            var currentsum = 0;
            for(var i = 0; i < aihaos.length; i++) {
              if(aihaos[i].checked) {
                currentsum++;
              }
            }

            first.checked = (currentsum == all);

          }

        }
      }</script>

    <input type="checkbox" id="first" /><br />
    <input type="checkbox" name="A" value="smoke" />吸烟<br />
    <input type="checkbox" name="A" value="drink" />喝酒<br />
    <input type="checkbox" name="A" value="play" />玩游戏<br />

  </body>

</html>

2、测试结果

复选框的全选和取消_html5


复选框的全选和取消_i++_02


复选框的全选和取消_i++_03