javascript - 未选中父项时，尝试清除子项复选框

问题描述

一旦未选中父复选框，我无法弄清楚如何清除子复选框。因此，例如，我检查美国，它会打开洛杉矶等建筑物......然后如果我检查洛杉矶，它会打开航运等部门。我想要它，这样如果前一个未被选中，他们都可以清除。我希望这很清楚我想要实现的目标。如果我得到它的工作，我会尝试并继续弄清楚并发布答案。

标准表格.php

  <!DOCTYPE html>
    <html>
    <head>
        <title>Checkbox</title>
    </head>
    <body>
    <h3>Checkbox Example with Javascript</h3>


  <input type="checkbox" name="us"><label 
name="us_lbl">US</label>
  <input type="checkbox" name="building"><label name="bld_lbl">Building</label>
  <input type="checkbox" name="department"><label name="dep_lbl">Department</label>

    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    </body>
    </html>

<script>

   $(function () {
        $('input[name="building"]').hide();

        //show it when the checkbox is clicked
        $('input[name="us"]').on('click', function () {
            if ($(this).prop('checked')) {
                $('input[name="building"]').fadeIn();
            } else {
                $('input[name="building"]').hide();
            }
        });
    });

    $(function () {
        $('label[name="bld_lbl"]').hide();

        //show it when the checkbox is clicked
        $('input[name="us"]').on('click', function () {
            if ($(this).prop('checked')) {
                $('label[name="bld_lbl"]').fadeIn();
            } else {
                $('label[name="bld_lbl"]').hide();
            }
        });
    });




   $(function () {
        $('input[name="department"]').hide();

        //show it when the checkbox is clicked
        $('input[name="building"]').on('click', function () {
            if ($(this).prop('checked')) {
                $('input[name="department"]').fadeIn();
            } else {
                $('input[name="department"]').hide();
            }
        });
    });

    $(function () {
        $('label[name="dep_lbl"]').hide();

        //show it when the checkbox is clicked
        $('input[name="building"]').on('click', function () {
            if ($(this).prop('checked')) {
                $('label[name="dep_lbl"]').fadeIn();
            } else {
                $('label[name="dep_lbl"]').hide();
            }
        });
    });
</script>

小提琴

标签： javascripthtml

function onCheckboxClick(elt){

  if(!elt.checked){

   var currentLevel = elt.className.split('-')[1]; // Returns the level of the current checkbox

   var childBoxes = document.getElementsByClassName('level-'+(++currentLevel));

    for(var i = 0; i< childBoxes.length;i++){
      childBoxes[i].checked=false;
      onCheckboxClick(childBoxes[i]); // recursively go through next levels
    }

  }

}

所以基本上你会在所有有孩子的复选框的点击事件上都有这个功能。并在您的情况下将级别设置为每组孩子的类：

   <input type="checkbox" onclick="onCheckboxClick(this)" name="us" class="level-1"><label name="us_lbl">US</label>
   <input type="checkbox" onclick="onCheckboxClick(this)" name="building" class="level-2"><label name="bld_lbl">Building</label>
   <input type="checkbox" onclick="onCheckboxClick(this)" name="department" class="level-3"><label name="dep_lbl">Department</label>

该函数将提取当前级别编号，并通过将级别添加 1 将所有子复选框收集在一个数组中，然后以编程方式取消选中它们。

如果您打算稍后使用类，您也可以在您的 dom 上定义一个自定义属性。

javascript - 未选中父项时，尝试清除子项复选框

问题描述

解决方案

推荐阅读