How to mark checked all checkboxes from jquery

Question

I want to check and uncheck a list of check boxes with single click using JavaScript:

<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">
<tr>
    <td width="10%"><input type="checkbox" name="All" value="All" checked="checked" id="SelectAll1" class="MemberSelectcheckBox1" /></td>
    <td width="90%"><strong>Field Name</strong>:</td>
</tr>
<tr>
    <td><input type="checkbox" name="FirstName" value="1" id="FirstName" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="checkbox" name="Surname" value="1" id="Surname" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Surname</td>
</tr>
<tr>
    <td><input type="checkbox" name="Email" value="1" id="Email" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Email</td>
</tr>
<tr>
    <td><input type="checkbox" name="Phone" value="1" id="Phone" class="MemberSelectcheckBox1" checked="checked"></td>
    <td>Phone</td>
</tr>
<tr>
</tr>
</table>

and JavaScript as mentioned below it only works for unchecked:

<script type="text/javascript">

$("#SelectAll1").click(function(){
    if($(this).is(':checked')){
        //$(".MemberSelectcheckBox1").attr('checked','checked');
    }else{
        $(".MemberSelectcheckBox1").removeAttr('checked');
    }
});

</script>

Answer 1

Here is the solution; use .prop() instead of attr() and removeAttr() , and it's better to use on() instead of click() :

$(document).on('click', '.#SelectAll1', function () {
    if($(this).is(':checked')) {
        $(".MemberSelectcheckBox1").prop("checked",true);
    } else {
        $(".MemberSelectcheckBox1").prop("checked",false); 
    }
});

Answer 2

This seems to work:

$("#SelectAll1").change(function() {
    if($(this).is(':checked')) {
        $(".MemberSelectcheckBox1").prop('checked', true);
    }
    else {
        $(".MemberSelectcheckBox1").prop('checked', false);
    }
});

Check the JSFiddle here .

Answer 3

Do not use .attr() to alter the state of a property, use .prop() instead.

See jQuery documentation ):

As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

As pointed out in the comments, use the .change() handler instead of the .click() handler, or toggling via keyboard will not be picked up.

You can also simplify the code then to:

$("#SelectAll1").change(function() {
    $(".MemberSelectcheckBox1").prop('checked', $(this).prop('checked'));
});

Answer 4

Try this:

<script type="text/javascript">

$("#SelectAll1").click(function() {
    $(".MemberSelectcheckBox1").each(function() {
        if($(this).is(':checked')) {
            //$(".MemberSelectcheckBox1").attr('checked', 'checked');
        } else {
            $(".MemberSelectcheckBox1").removeAttr('checked');
        }
    });
});
</script>

Answer 5

Try this I think it will help:

(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked', 'checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})       

<input type="checkbox" class="checkAll" /> <b>Check All</b>
<input type="checkbox" class="cb-element" /> Box1
<input type="checkbox" class="cb-element" /> Box2
<input type="checkbox" class="cb-element" /> Box3

Answer 6

Try this:

$("#SelectAll1").click(function(){
    if($(this).is(':checked')){
        $(".MemberSelectcheckBox1").each(function(){
            $(this).prop('checked', 'checked');
        });
    }else{
        $(".MemberSelectcheckBox1").removeAttr('checked');
    }
});

Answer 7

attr('checked', true) will not work in jquery > 1.9 . Hence use prop() instead of attr()

Try this:

$("#SelectAll1").change(function() {
    $.each($('[class=MemberSelectcheckBox1]'), function (i, item) {
        if($(this).is(':checked')) {
            $(".MemberSelectcheckBox1").prop('checked', true);

        } else {
            $(".MemberSelectcheckBox1").removeAttr('checked');
        }
    });
});

Demo

Answer 8

$("#SelectAll1").click(function() {
        var isChecked = $(this).is(':checked');
        if(isChecked) {
           $(".MemberSelectcheckBox1").attr({checked:true});
        } else {
            $(".MemberSelectcheckBox1").attr({checked:false});

        }
    });