JS复选框checkbox：父复选框全选全取消子选框和子选框选则而父选框自动选中的代码

最新推荐文章于 2019-06-05 08:04:07 发布

kissing7

最新推荐文章于 2019-06-05 08:04:07 发布

阅读量3.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/kissing7/article/details/8920566

版权

本文介绍了如何使用JavaScript实现复选框功能，包括一个父复选框全选或取消所有子复选框的功能，并且当所有子选项被选中时，父选项会自动被选中。通过示例代码`<input type="checkbox" id="allSelected" onclick="allselect()" checked/>`和`<input type="checkbox" onclick="fatherselect()" />`，展示了具体的实现方式。

摘要由CSDN通过智能技术生成

<input type="checkbox" name="allSelected" id="allSelected" checked="true" οnclick="allselect()"/>复选项：

<input type="checkbox" name="warningType" value="${rows.key }" οnclick="fatherselect()"/>子选项

//父复选框全选全取消子选框

function allselect(){

               obj=document.getElementById("allSelected");
               tagNamesObj=document.getElementsByName("warningType");
               if(obj.checked){
                   for(i=0;i<tagNamesObj.length;i++){
                       tagNamesObj[i].checked=true;
                   }
               }else{
                   for(i=0;i<tagNamesObj.length;i++){
                       tagNamesOb