Question

我有一种复选框形式，它是根据用户内容动态生成的。复选框的各个部分按类别划分，每个类别都包含项目。出于数据库目的，类别值具有隐藏的复选框。如果某个类别包含已选中复选框的子项，则也会选中“类别”复选框。

我使用JQuery .click（）让这个工作正常，但我无法弄清楚如何在页面加载时这样做。

以下是我实际点击复选框时的代码：

$(".project").click(function() {

    if($(this).is(":checked") && $(this).hasClass("project")) {
       $(this).parent().parent().children(':first').attr('checked', true);

    }else if(!$(this).parent().children('.project').is(":checked")){
        $(this).parent().parent().children(':first').attr('checked', false);

    }
 });

现在，当我正在编辑这些框的状态时（意味着在将它们保存到数据库之后），即使检查了子项目，类别框也不会显示为已检查。我该怎么做才能在加载时检查我的类别框是否检查了该类别的孩子？

我认为部分问题在于动态更改父子设置，如何找到父盒以便检查它？谢谢！

Answer 1

修改

假设父元素具有唯一的类。

<div class="parent"> <input type="checkbox" /> <div> <input type="checkbox" class="project" checked="checked" /> </div> <div> <input type="checkbox" class="project" /> </div> </div>

您可以在页面加载时执行以下操作：

$('.parent:has(.project:checked)').children(':first').attr('checked','checked');

这将返回.parent个元素，这些元素至少有一个具有类project的后代并被选中。

的文档：选择器http://api.jquery.com/has-selector/

如果要在页面加载时运行click处理程序，可以手动触发它。

$(".project").click(function() { if($(this).is(":checked") && $(this).hasClass("project")) { $(this).parent().parent().children(':first').attr('checked', true); }else if(!$(this).parent().children('.project').is(":checked")){ $(this).parent().parent().children(':first').attr('checked', false); } }); $('.project').click(); // Triggers the click event handler

这是：
的简写
$('.project').trigger('click'); // Accomplishes the same as above

Answer 2

我建议使用live()方法绑定触发器，它旨在将绑定应用于动态创建的元素。

使用jquery动态生成复选框的父/子关系的问题

2 个答案: