Setting and unsetting an attribute works only once

Question

I have a form with several checkboxes that I'm trying to check/uncheck by clicking certain links. It works the first time I use it, but then fails every time there after. Code is:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox Test</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script language="javascript">
    $('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').attr('checked', 'checked');
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').removeAttr('checked');
        });
    });
</script>
<style type="text/css"> 
span {
    text-decoration: underline;
    cursor: pointer;
}
</style>
</head>

<body>
<h2>Checkbox Test</h2>
<form name="form1" method="post" action="">
    <p>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
            Checkbox</label>
        <br>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1">
            Checkbox</label>
        <br>
    </p>
</form>
<p><span id="chkAll">Check All</span> / <span id="unChkAll">Uncheck all</span></p>
</body>
</html>

I'm not sure what going on here. When I inspect the input element using firebug, it shows the "Checked" attribute being set and unset. Yet, when actually looking at the checkboxes, nothing changes.

Help is required.

That's because you should be setting the property with prop(), not the attribute — adeneo, Mar 26 '14 at 16:59
possible duplicate of [In jQuery how do you check and uncheck all checkboxes using an element?](http://stackoverflow.com/questions/17457818/in-jquery-how-do-you-check-and-uncheck-all-checkboxes-using-an-element) — Ram, Mar 26 '14 at 17:05

score 1 · Answer 1 · answered Mar 26 '14 at 16:58

Your code is not working after first time as you've described is because you're using .removeAttr() so it'll permanently remove your checked attribute from all the checkboxes.

So, in your case you want to set it instead of removing it, that's why you should use .prop() instead of .removeAttr():

$('document').ready(function () {
    $('#chkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', true);
    });
    $('#unChkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', false);
    });
});

Fiddle Demo

score 1 · Answer 2 · answered Mar 26 '14 at 16:58

use .prop

$('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', true);
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').prop('checked',false);
        });
    });

Learn more about it here

score 1 · Answer 3 · answered Mar 26 '14 at 16:58

1

Use .prop() instead of .removeAttr() which removes an attribute from element:

$('document').ready(function() {
        $('#chkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', true);
        });
        $('#unChkAll').click(function() {
            $('input[type="checkbox"]').prop('checked', false);
        });
    });

DEMO

answered Mar 26 '14 at 16:58

Kiran

20,167
11
67
99

Thank you so much. I've seen other answers where people were trying to do the same thing and that's where I picked up the 'attr' tjhing. – Tom Harger Mar 26 '14 at 17:03
@TomHarger: Hope this helps you: http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery – Kiran Mar 26 '14 at 17:05

Setting and unsetting an attribute works only once

3 Answers3