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

最新推荐文章于 2022-04-03 21:17:43 发布

kissing7

最新推荐文章于 2022-04-03 21:17:43 发布

阅读量3.9k

点赞数

分类专栏： javascript

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

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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++){
                       tagNamesObj[i].checked=false;
                   }
               }
           }
//子选框选则而父选框自动选中
           function fatherselect(){
           tagNamesObj=document.getElementsByName("warningType");
           obj=document.getElementById("allSelected");
              for(i=0;i<tagNamesObj.length;i++){
              if(tagNamesObj[i].checked){
                obj.checked = true;

                }

              }

}

</script >