如何使用JavaScript或jQuery在嵌套GridView中取消选中复选框

时间:2019-05-02 05:07:42

标签: javascript jquery html asp.net

实际上,我实现了一半的代码,例如是否选中了一个复选框,然后选中该复选框下的所有复选框。

但是,如果我也将其他复选框也标记为未选中,那么现在我想取消选中主复选框...

请帮我解决这个问题...

我的代码:

<script type="text/javascript">
    function SelectAllCheckboxesA(chk, chk1, chk2, chk3, chk4) {
        document.getElementById(chk1).checked = document.getElementById(chk2).checked = document.getElementById(chk3).checked = document.getElementById(chk4).checked = document.getElementById(chk).checked;
        if (document.getElementById(chk1).checked == false || document.getElementById(chk2).checked == false || document.getElementById(chk3).checked == false || document.getElementById(chk4).checked == false) document.getElementById(chk).checked = false;
    }
</script>

1 个答案:

答案 0 :(得分:0)

如果您将css类分配给父复选框,然后将css类分配给所有孩子,则将更加容易。

<html>
   <body>
      <br><br>
      <input type="checkbox" class="parent" name="vehicle" > Parent<br>
      <br>
      <input type="checkbox" class="child" name="vehicle"> child 1<br>
      <input type="checkbox" class="child" name="vehicle"> child 2<br>
      <input type="checkbox" class="child" name="vehicle"> child 3<br>
      <script type="text/javascript">
     var parentCheckBox = document.querySelector(".parent");
     var childCheckBoxes = document.querySelectorAll(".child");
     parentCheckBox.onclick = function(){
         childCheckBoxes.forEach(function(child){
        child.checked=parentCheckBox.checked;
         });
     }
     childCheckBoxes.forEach(function(child){
        child.onclick = function(){ 
      var allchecked = true;
         childCheckBoxes.forEach(function(childBox){       
           allchecked = allchecked? childBox.checked : allchecked;       
         });
           parentCheckBox.checked = allchecked;
         } 
     });
      </script>
   </body>
</html>

这是演示https://jsfiddle.net/m23txgdz/