javascript实现复选框的全选功能

最新推荐文章于 2022-08-28 20:54:31 发布

hhrxp373317

最新推荐文章于 2022-08-28 20:54:31 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript checkbox 复选框全选

本文链接：https://blog.csdn.net/hhrxp/article/details/11633817

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript">
function selectAll(){//全选复选框方法
  var inp = document.getElementsByName("checkbox");
  var powerinp = document.getElementById("all");
  for(var i=0;i<inp.length;i++){
   if(powerinp.checked==true){//如果全选复选框为选中状态true
    inp[i].checked=true;//则给所有子复选框全部赋值为true
   }else{
    inp[i].checked=false;//否则全部赋值为false
   }
  }
}

function check(){//子复选框方法
  var inp = document.getElementsByName("checkbox");
  var powerinp = document.getElementById("all");
  for(var i=0;i<inp.length;i++){
   if(inp[i].checked==false){
    powerinp.checked=false;//子复选框有一个没选中，全选复选框就为false
    break;
   }
   if(i==inp.length-1){//如果可以遍历到最后一个，说明子复选框全部选中
    powerinp.checked=true;//则给全选复选框赋值true
   }
  }
}
</script>

</head>
<body>
全选 
<input type="checkbox" id="all" οnclick="selectAll()"/><br/>

Item1
<input type="checkbox" name="checkbox" οnclick="check()"/ > <br/>

Item2
<input type="checkbox" name="checkbox" οnclick="check()"/><br/>

Item3
<input type="checkbox" name="checkbox" οnclick="check()"/><br/>

Item4
<input type="checkbox" name="checkbox" οnclick="check()" /><br/>

Item5
<input type="checkbox" name="checkbox" οnclick="check()" /><br/>
</body>
</html>