Question

我有一组复选框（从数据库中提取）。

这就是我需要的：

如果在div = tick parent
如果在div = un-tick parent

我在网上搜索过但没有太多运气。

我正在努力寻找父母，希望下面的代码能够找到单个div中所有孩子都被勾选的所有孩子。我不确定如何再次获得父母？

if ($('.group').parent().siblings('.child-group').find("input").not(':checked').size() == 0)
{
    $('#').closest('input');
    alert("instead");

}

                   <div id="OneParent">
                    <img id="OneImage" class="box-toggle" data-paired-element="One" src="../../Content/Images/minus.jpg" width="15px" height="15px" />
                    <label><input type="checkbox" id="One" class="group" />One</label>                        

                    <div class="One child-group">
                        <ul>
                                <li>
                                    <label>
                                            <input type="checkbox" id="circulationList" class="One child" name="SelectedUsers" value="User1" checked="checked" />
                                        User1
                                    </label>
                                </li>
                                <li>
                                    <label>
                                            <input type="checkbox" id="circulationList" class="One child" name="SelectedUsers" value="User2" checked="checked" />
                                        User2
                                    </label>
                                </li>
                        </ul>
                    </div>
                </div>
                <div id="TwoParent">
                    <img id="TwoImage" class="box-toggle" data-paired-element="Two" src="../../Content/Images/minus.jpg" width="15px" height="15px" />
                    <label><input type="checkbox" id="Two" class="group" />Two</label>                        

                    <div class="Two child-group">
                        <ul>
                                <li>
                                    <label>
                                            <input type="checkbox" id="circulationList" class="Two child" name="SelectedUsers" value="User3" checked="checked" />
                                        User3
                                    </label>
                                </li>
                        </ul>
                    </div>
                </div>

提前感谢您的帮助。

克莱尔： - ）

Answer 1

你可以用这个：

$('.child').on('change', function () {
    var parent = $(this).closest('.child-group'),
        status = parent.find('input.child').not(':checked').length === 0;
    parent.prev("label").find('.group').prop('checked', status);
}).trigger('change');

这里有效：http://jsfiddle.net/RP9FC/5/

Answer 2

$(document).on('change', 'input.child', function (e) {
    var $target = $(e.target),
        $group = $target.parents().find('input.group');
    $group.prop("checked", $target.parents().find('input.child:checked').length > 0);
})

http://jsfiddle.net/ma9ic/a8eJT/

Answer 3

我建议：

$('input[type="checkbox"].child').change(function(){
    var $a = $(this).closest('ul'),
        $c = $a.find('input[type="checkbox"]'),
        checked = $c.filter(function(){
            return this.checked;
        });
    $a.closest('div[id]').find('> label > input[type="checkbox"]').prop('checked', $c.length === checked.length);
});

JS Fiddle demo

参考文献：

Answer 4

试试这个

$('#select_all').click(function() {
var c = this.checked;
$(':checkbox').prop('checked',c);
});

或者

$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
    checkboxes.attr('checked', 'checked');
} else {
    checkboxes.removeAttr('checked');
}
});

如果选择了所有子项JQuery，则选中父项

4 个答案: