Question

我想在点击任何一个孩子时选择父项。此代码正在检查并检查。

$(function() {
  $(".child").on("click",function() {
      $parent = $(this).prevAll(".parent");
      if ($(this).is(":checked")) $parent.prop("checked",true);
      else {
         var len = $(this).parent().find(".child:checked").length;
         $parent.prop("checked",len>0);
      }    
  });
  $(".parent").on("click",function() {
      $(this).parent().find(".child").prop("checked",this.checked);
  });
});

它正在使用输入（请参阅此link）

<input type='checkbox' name='cat' class='parent' value='cat1' />Category 1<br>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 1<br>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 2

但是＆lt; li>检查无效（请参阅此link）

<input type='checkbox' name='cat' class='parent' value='cat1' />Category 1
<ul>
    <il><input type='checkbox' name='foo' class='child' value='1' />SubCategory 1</il>
    <il><input type='checkbox' name='foo' class='child' value='1' />SubCategory 2</il>
</ul>

Answer 1

添加无序列表会添加另一层父子。编辑此行：

      $parent = $(this).parent().prevAll(".parent");

到此：

  $parent = $(this).parent().parent().prevAll(".parent");

正确指向您想要的父母。

Answer 2

看了你的代码之后，我想出了一个我认为你正在寻找的解决方案。

通过使用自定义属性，如果选中了其中一个子复选框，则选中顶级复选框。如果选中至少一个子级别复选框，则父级别保持选中状态。否则，未经检查。这可能比导航DOM更容易，最终代码更少。

$(function() {
  $(".child").change(function() {
      if ($('.child[thisparent=' + $(this).attr('thisparent') + ']:checked').length == 0) {
          $('#' + $(this).attr('thisparent')).prop('checked', false);
      }
      else {
          $('#' + $(this).attr('thisparent')).prop('checked', true);
      }
  });
  $(".parent").change(function() {
      $('input[thisparent="' + $(this).attr('id') + '"]').prop('checked', $(this).prop('checked'));
  });
});

JSFiddle：here

另外，你的HTML无效。你的＆＃34; il＆＃34;标签应该是＆＃34; li＆＃34;

复选框全部点击

2 个答案: