0

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

这就是我需要的：

  • 如果在 div = 勾选父项中选择了所有子项
  • 如果在 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>

提前感谢您的帮助。

克莱尔:-)

4

4 回答 4

5

你可以使用这个：

$('.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/

于 2013-06-19T13:57:31.643 回答
0 
$(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/

于 2013-06-19T14:07:06.470 回答
0

尝试这个

$('#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');
}
});
于 2013-06-19T14:12:58.860 回答
0

我建议：

$('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 小提琴演示。

参考：

于 2013-06-19T14:08:51.823 回答