checkbox全选反选。如果子项中有一项未选择则全选checkbox不选中,如果子项全部选中则全选checkbox选中

来源:互联网 发布:高铁用什么软件订票 编辑:程序博客网 时间:2024/06/05 17:44

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> checkbox全选/反选 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<script type="text/javascript">
<!--
 
 /*点击全选checkbox,子项全部选择,如果子项中有一项未选择则全选checkbox不选中,如果子项全部选中则全选checkbox选中*/
 function checkAll() {
  var item = document.getElementsByName("checkedItem");
  for (var i = 0; i <item.length; i++) {
   if (true == document.getElementById("checked").checked) {
    item[i].checked = true;
   } else {
    item[i].checked = false;
   }
  }
 }

 function checkFalse() {
  var item = document.getElementsByName("checkedItem");
  var count = 0;
  for (var i = 0; i <item.length; i++) {
   if (item[i].checked == false) {
    count += i;
    document.getElementById("checked").checked = false;
    break;
   }
   if(count == 0) {
    document.getElementById("checked").checked = true;
   }
   
  }
 }
//-->
</script>
 <body>
  全选<input type="checkbox" id="checked" name="checked" onclick="checkAll()"/>
  <br>-------<br>
  <input type="checkbox" id="checkedItem" name="checkedItem" onclick="checkFalse()"/><br>
  <input type="checkbox" id="checkedItem" name="checkedItem" onclick="checkFalse()"/><br>
  <input type="checkbox" id="checkedItem" name="checkedItem" onclick="checkFalse()"/><br>
  <input type="checkbox" id="checkedItem" name="checkedItem" onclick="checkFalse()"/><br>
  <input type="checkbox" id="checkedItem" name="checkedItem" onclick="checkFalse()"/>
 </body>
</html>

原创粉丝点击