复选框全选与全不选操作实现思路

复制代码 代码如下:

  <SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>

  <html>

  <head>

  <title>复选框处理.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="this is my page">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

  <input type="checkbox" id="checkItem">全选/全不选

  <br>

  <h3>爱好</h3>

  <input type="checkbox" name="item">看书

  <br>

  <input type="checkbox" name="item">听音乐

  <br>

  <input type="checkbox" name="item">打球

  <br>

  <input type="checkbox" name="item">散步

  <br>

  <input type="checkbox" name="item">写代码

  <br>

  <script>

  window.onload = function(){

  var checkItem = document.getElementById("checkItem").onclick = function(){

  var itemsElement = document.getElementsByName("item");

  for (var i = 0; i < itemsElement.length; i++) {

  var itemElement = itemsElement[i];

  if (this.checked) {

  itemElement.checked = "checked";

  }

  else {

  itemElement.checked = null;

  }

  }

  }

  }

  </script>

  </body>

  </html>

  </SPAN>