0

チェックボックスのグループがあります（データベースから取得）。

これは私が必要なものです：

  • すべての子が div 内で選択されている場合 = 親にチェックを入れる
  • div 内で 1 つの子が選択されていない場合 = 親のチェックを外す

私はウェブを検索しましたが、あまり運がありませんでした。

私は親を見つけるのに苦労しています。うまくいけば、以下のコードは現在、すべてがチェックされている単一の 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

私はお勧めします：

$('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 に答える
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 に答える