CODEWITHSUNDEEP
jquerycheckbox
ClareBear
ClareBear

Reputation: 1523

Tick parent if all children are selected JQuery

I have a group of check-boxes (pulled from a database).

This is what I need:

I have searched the web but not had much luck.

I am struggling with finding the parent, hopefully the code below currently finds all children within single div where all are ticked. I am unsure how to then get the parent again?

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>

Thanks in advance for any help.

Clare :-)

Upvotes: 0

Views: 4112

Answers (4)

Amol
Amol

Reputation: 1461

Try this

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

Or

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253446

I'd suggest:

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

References:

Upvotes: 0

HarryFink
HarryFink

Reputation: 1010

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

Upvotes: 0

Joe
Joe

Reputation: 15538

You could use this:

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

Here it is working: http://jsfiddle.net/RP9FC/5/

Upvotes: 5

Related Questions