1

我有一种复选框，它是根据用户内容动态生成的。复选框部分按类别划分，每个类别中都有项目。出于数据库目的，类别值具有隐藏的复选框。如果一个类别的子项目具有选中的复选框，则该类别复选框也被选中。

我已经使用 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);

    }
 });

现在，当我编辑这些框的状态时（意味着在它们被保存到数据库之后），即使它们的子项目被选中，类别框也没有显示为选中状态。如果选中该类别的子项，我该怎么做才能在加载时检查我的类别框？

我认为问题的一部分是动态变化的父子设置，我怎样才能找到父框以便检查它？谢谢！

4

2 回答 2

0

编辑：

假设父元素有一个独特的类。

<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并已检查的后代的元素。

:has选择器的文档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
于 2010-06-01T16:35:00.963 回答
0

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

于 2010-06-01T16:38:05.293 回答