jquery - 使用 jquery 处理嵌套/层次类别中的复选框

Question

我有一个 WooCommerce 在线商店，我正在尝试让用户正确选择类别。

这个想法是，如果他们选择一个子类别，那么父类别也会被选择。

我已经这样做了，但是当取消选中类别子项(并且没有检查输入)时，父项仍保持选中状态。

$('ul.product_cat_list').find('input[type=checkbox]').each(function(index, input) {
  $(input).bind('change', function() {
    var checkbox = $(this);
    var is_checked = $(checkbox).is(':checked');
    if(is_checked) {
        $(checkbox).parents('li').children('input').attr('checked', 'checked');
    } else {
      $(checkbox).parentsUntil('ul').find('input').removeAttr('checked');
    }
  });
});

这里是Fiddle

Answer 1

查看以下标记是层次结构:

product_cat_list
    li
        input+ul.children
            li
                input+ul.children
                    li
                    li
                    li
                input+ul.children
                    li
                    li
                    input+ul.children
                        li
                        li
                            input+ul.children
                                li
                                li
                                li
                            input+ul.children
                                li
                                    input
                                li
                                    input
                                li
                                    input
                                li
                                    input
                        li
                    li
                input+ul.children
                    li
                    li
                    li
            li
            li
            li

    li 

我添加了更多级别以便运行测试。 经过测试发现，从起点开始重复执行相同的操作。因此，您将需要一个递归调用的函数。

    $(document).ready(function() {
      $("ul.product_cat_list input[type=checkbox]").on("change", function() {

        var checkboxValue = $(this).prop("checked");

        //call the recursive function for the first time
        decideParentsValue($(this));

        //Compulsorily apply check value Down in DOM
        $(this).closest("li").find(".children input[type=checkbox]").prop("checked", checkboxValue);


      });

      //the recursive function 
      function decideParentsValue(me) {
        var shouldTraverseUp = false;
        var checkedCount = 0;
        var myValue = me.prop("checked");

        //inspect my siblings to decide parents value
        $.each($(me).closest(".children").children('li'), function() {
          var checkbox = $(this).children("input[type=checkbox]");
          if ($(checkbox).prop("checked")) {
            checkedCount = checkedCount + 1;
          }
        });

        //if I am checked and my siblings are also checked do nothing
        //OR
        //if I am unchecked and my any sibling is checked do nothing
        if ((myValue == true && checkedCount == 1) || (myValue == false && checkedCount == 0)) {
          shouldTraverseUp = true;
        }
        if (shouldTraverseUp == true) {
          var inputCheckBox = $(me).closest(".children").siblings("input[type=checkbox]");
          inputCheckBox.prop("checked", me.prop("checked"));
          decideParentsValue(inputCheckBox);
        }

      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="control unstyled product_cat_list">
  <li id="product_cat-51">
    <input value="51" type="checkbox" name="product_cat[]" id="in-product_cat-51">
    <label class="selectit">Accesorios</label>
    <ul class="children">

      <li id="product_cat-52">
        <input value="52" type="checkbox" name="product_cat[]" id="in-product_cat-52">
        <label class="selectit">Abanicos</label>
      </li>

      <li id="product_cat-53">
        <input value="53" type="checkbox" name="product_cat[]" id="in-product_cat-53">
        <label class="selectit">Bandoleras y riñoneras</label>
      </li>

      <li id="product_cat-246">
        <input value="246" type="checkbox" name="product_cat[]" id="in-product_cat-246">
        <label class="selectit">Billeteras</label>
      </li>

      <li id="product_cat-205">
        <input value="205" type="checkbox" name="product_cat[]" id="in-product_cat-205">
        <label class="selectit">Botones, pins</label>
      </li>

      <li id="product_cat-54">
        <input value="54" type="checkbox" name="product_cat[]" id="in-product_cat-54">
        <label class="selectit">Bufandas</label>
      </li>

      <li id="product_cat-342">
        <input value="342" type="checkbox" name="product_cat[]" id="in-product_cat-342">
        <label class="selectit">Cartucheras</label>
      </li>

      <li id="product_cat-55">
        <input value="55" type="checkbox" name="product_cat[]" id="in-product_cat-55">
        <label class="selectit">Chales y ponchos</label>
      </li>

      <li id="product_cat-56">
        <input value="56" type="checkbox" name="product_cat[]" id="in-product_cat-56">
        <label class="selectit">Cinturones</label>
        <ul class="children">

          <li id="product_cat-69">
            <input value="69" type="checkbox" name="product_cat[]" id="in-product_cat-69">
            <label class="selectit">Cinturones de hombre</label>
          </li>

          <li id="product_cat-70">
            <input value="70" type="checkbox" name="product_cat[]" id="in-product_cat-70">
            <label class="selectit">Cinturones de mujer</label>
          </li>

          <li id="product_cat-71">
            <input value="71" type="checkbox" name="product_cat[]" id="in-product_cat-71">
            <label class="selectit">Cinturones infantiles</label>
          </li>

          <li id="product_cat-72">
            <input value="72" type="checkbox" name="product_cat[]" id="in-product_cat-72">
            <label class="selectit">Cinturones unisex</label>
          </li>
        </ul>
      </li>

      <li id="product_cat-60">
        <input value="60" type="checkbox" name="product_cat[]" id="in-product_cat-60">
        <label class="selectit">Estuches, fundas</label>
      </li>

      <li id="product_cat-61">
        <input value="61" type="checkbox" name="product_cat[]" id="in-product_cat-61">
        <label class="selectit">Gorros, boinas y sombreros</label>
        <ul class="children">

          <li id="product_cat-78">
            <input value="78" type="checkbox" name="product_cat[]" id="in-product_cat-78">
            <label class="selectit">Gorros y boinas de fiesta</label>
          </li>

          <li id="product_cat-79">
            <input value="79" type="checkbox" name="product_cat[]" id="in-product_cat-79">
            <label class="selectit">Gorros y boinas de hombre</label>
          </li>

          <li id="product_cat-80">
            <input value="80" type="checkbox" name="product_cat[]" id="in-product_cat-80">
            <label class="selectit">Gorros y boinas deportivos y de playa</label>
          </li>

          <li id="product_cat-81">
            <input value="81" type="checkbox" name="product_cat[]" id="in-product_cat-81">
            <label class="selectit">Gorros y boinas infantiles</label>
          </li>

          <li id="product_cat-361">
            <input value="361" type="checkbox" name="product_cat[]" id="in-product_cat-361">
            <label class="selectit">Gorros y boinas para mujer</label>
          </li>

          <li id="product_cat-83">
            <input value="83" type="checkbox" name="product_cat[]" id="in-product_cat-83">
            <label class="selectit">Otros</label>
          </li>
        </ul>
      </li>

      <li id="product_cat-93">
        <input value="93" type="checkbox" name="product_cat[]" id="in-product_cat-93">
        <label class="selectit">Máscaras</label>
      </li>

      <li id="product_cat-63">
        <input value="63" type="checkbox" name="product_cat[]" id="in-product_cat-63">
        <label class="selectit">Mochilas</label>
      </li>

      <li id="product_cat-64">
        <input value="64" type="checkbox" name="product_cat[]" id="in-product_cat-64">
        <label class="selectit">Monederos y estuches</label>
      </li>

      <li id="product_cat-68">
        <input value="68" type="checkbox" name="product_cat[]" id="in-product_cat-68">
        <label class="selectit">Otros</label>
      </li>

      <li id="product_cat-65">
        <input value="65" type="checkbox" name="product_cat[]" id="in-product_cat-65">
        <label class="selectit">Pañuelos</label>
      </li>

      <li id="product_cat-802">
        <input value="802" type="checkbox" name="product_cat[]" id="in-product_cat-802">
        <label class="selectit">Para celulares</label>
      </li>

      <li id="product_cat-206">
        <input value="206" type="checkbox" name="product_cat[]" id="in-product_cat-206">
        <label class="selectit">Pipas, tabaqueras y cigarreras</label>
      </li>
    </ul>
  </li>
  <li id="product_cat-266">
    <input value="266" type="checkbox" name="product_cat[]" id="in-product_cat-266">
    <label class="selectit">Alimentos</label>
    <ul class="children">

      <li id="product_cat-267">
        <input value="267" type="checkbox" name="product_cat[]" id="in-product_cat-267">
        <label class="selectit">Adornos para torta</label>
        <ul class="children">

          <li id="product_cat-270">
            <input value="270" type="checkbox" name="product_cat[]" id="in-product_cat-270">
            <label class="selectit">Casamientos</label>
          </li>

          <li id="product_cat-271">
            <input value="271" type="checkbox" name="product_cat[]" id="in-product_cat-271">
            <label class="selectit">Cumpleaños</label>
          </li>
        </ul>
      </li>

      <li id="product_cat-268">
        <input value="268" type="checkbox" name="product_cat[]" id="in-product_cat-268">
        <label class="selectit">Cervecería</label>
      </li>

      <li id="product_cat-334">
        <input value="334" type="checkbox" name="product_cat[]" id="in-product_cat-334">
        <label class="selectit">Mermeladas y dulces</label>
      </li>

      <li id="product_cat-281">
        <input value="281" type="checkbox" name="product_cat[]" id="in-product_cat-281">
        <label class="selectit">Tortas decoradas</label>
      </li>

      <li id="product_cat-269">
        <input value="269" type="checkbox" name="product_cat[]" id="in-product_cat-269">
        <label class="selectit">Yerba</label>
      </li>
    </ul>
  </li>
</ul>

希望这对您有帮助!