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

vbopmzt1 于 2023-01-30 发布在 jQuery

关注(0)|答案(4)|浏览(127)

我有一个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

jquery

来源：https://stackoverflow.com/questions/36845993/handling-checkboxes-in-nested-hierarchial-categories-using-jquery

4条答案

按热度按时间

iih3973s1#

查看标记的层次结构如下：

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

我已经添加了一些更多的层次，以便运行测试。运行测试后，可以看到相同的操作从起点重复执行。因此，您将需要一个递归调用的函数。
x一个一个一个一个x一个一个二个x
希望这对你有帮助!

赞(0）回复(0）举报 2023-01-30

lyr7nygr2#

编辑日期：
现在，解决方案是处理根节点之前的所有父节点：

handleChildren = function() {
  var $checkbox = $(this);
  var $checkboxChildren = $checkbox.parent().find(".children input[type=checkbox]");
  $checkboxChildren.each(function() {
    if ($checkbox.is(":checked")) {
      $(this).prop("checked", "checked");
    } else {
      $(this).removeProp("checked");
    }
  });
};
handleParents = function(current) {
  var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
  if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
    $parent.prop("checked", "checked");
  } else {
    $parent.removeProp("checked");
  }
  handleParents($parent);
}

$('ul.product_cat_list').find('input[type=checkbox]').each(function(index, input) {
  $(input).on('click', handleChildren);
  $(input).on('click', function() {
    handleParents(this);
  });
});

小提琴：https://jsfiddle.net/diegopolido/040shgbg/4/

赞(0）回复(0）举报 2023-01-30

monwx1rj3#

我根据Diego的代码添加了"不确定状态复选框"。

handleParents = function(current) {
  var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
  if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
    if ($parent.parent().find(".children input[type=checkbox]:checked").length == $parent.parent().find(".children input[type=checkbox]").length) {
      $parent.prop("indeterminate", false);
      $parent.prop("checked", "checked");
    } else {
      $parent.prop("indeterminate", true);
    }
  } else {
    $parent.prop("indeterminate", false);
    $parent.removeProp("checked");
  }
  handleParents($parent);
}

小提琴：https://jsfiddle.net/wyysoft/xu0ev6wp/

赞(0）回复(0）举报 2023-01-30

ilmyapht4#

修改Eric Wang的代码以运行jQuery 1.6+，并修复以防止handleParents永远调用自己。

handleChildren = function() {
  var $checkbox = $(this);
  var $checkboxChildren = $checkbox.parent().find(".children input[type=checkbox]");
  $checkboxChildren.each(function() {
  if ($checkbox.prop('checked')) {
     $(this).prop('checked', true);
  } else {
     $(this).prop('checked', false);
  }
 });
};
handleParents = function(current) {
  var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
  if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
    if ($parent.parent().find(".children input[type=checkbox]:checked").length == $parent.parent().find(".children input[type=checkbox]").length) {
      $parent.prop("indeterminate", false);
      $parent.prop('checked', true);
    } else {
      $parent.prop("indeterminate", true);
    }
  } else {
    $parent.prop("indeterminate", false);
    $parent.prop('checked', false);
  }
  if($parent.length >0){
    handleParents($parent);
  }
}

在这里拨弄：https://jsfiddle.net/ufoajkh7/

赞(0）回复(0）举报 2023-01-30

我来回答

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

4条答案

相关问题

热门标签

最新问答