CODEWITHSUNDEEP
jquery
Dhiraj Wakchaure
Dhiraj Wakchaure

Reputation: 2706

How to select all the checkboxes when selecting single checkboxes

Hi

A problem occured when trying to select all check boxes on selecting single checkbox. These are dynamically produced (Via AJAX) check boxes so binding event was some tedious. Following is the code in html

<form id="frm" name="frm">
    <input name="chk" type="checkbox" id="chk" value="" />main checkbox
    <input name="chk1" type="checkbox" id="chk1" value="" />1
    <input name="chk2" type="checkbox" id="chk2" value="" />2
    <input name="chk3" type="checkbox" id="chk3" value="" />3
    <input name="chk4" type="checkbox" id="chk4" value="" />4
    <input name="chk5" type="checkbox" id="chk5" value="" />5
    <input name="chk6" type="checkbox" id="chk6" value="" />6
</form>

Upvotes: 0

Views: 96

Answers (3)

Dhiraj Wakchaure
Dhiraj Wakchaure

Reputation: 2706

$(document).ready(function () {
    $("body").on("click", "#chk", function () {
        var checkboxes = $(this).closest('form').find(':checkbox');
        checkboxes.prop('checked', $(this).prop('checked'));
    });
});

this will work if click on "chk" checkbox it will check all checkboxes within that form, even they are loaded via Ajax

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

jQuery(function ($) {
    $('#chk').change(function () {
        $('#frm input[type="checkbox"]').not(this).prop('checked', this.checked)
    })
})

Demo: Fiddle

Upvotes: 2

Felix
Felix

Reputation: 38102

Instead of $(this).prop('checked'), you can just use this.checked

$(document).ready(function() {
    $("#sub").on("click", "#chk" , function() {      
        var checkboxes = $(this).closest('form').find(':checkbox');
        checkboxes.prop('checked', this.checked);
    });
});

Upvotes: 3

Related Questions