changing the checked attribute of checkbox using jquery

Question

I have to control the checked status a list of checkboxes from another checkbox.

HTML:

    <input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
    <input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
    <input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
    <input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>

JS:

$('#readall').click(function()
{
    var checkStatus = $(this).is(':checked');
    var checkboxList =  $('#permGrid input[rel="read"]');
    $(checkboxList).attr('rel', 'read').each(function(index)
    {
        if(checkStatus == true)
        {
            $(this).attr('checked', 'checked');
            console.log($(this).attr('checked'));
        }
        else
        {
            $(this).removeAttr('checked').reload();
            console.log($(this).attr('checked'));
        }
    });
});

The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?

I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.

Anton · Accepted Answer · 2014-03-12 09:33:07Z

2

Try using prop, and shorten the code alot like this

$('#readall').click(function () {
    var checkboxList = $('#permGrid input[rel="read"]')
    checkboxList.prop('checked', this.checked);
});

DEMO

answered Mar 12, 2014 at 9:33

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen · Accepted Answer · 2014-03-12 09:33:21Z

0

You can't use a method .reload like this

$(this).removeAttr('checked').reload(); 
                  // returns Uncaught TypeError: Object #<Object> has no method 'reload'

Remove it, and it will work.

JSFiddle

answered Mar 12, 2014 at 9:33

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Comments

Aniruddha · Accepted Answer · 2014-03-12 10:05:57Z

Use a class for all the checkboxes which you need to change on click of some checkbox. Like:

<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />

I have added a class="toChange" to all the checkboxes except the first one.

<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>

Then use the following script:

$('#readall').click(function(){
    var checkStatus = $(this).is(':checked');   

    if(checkStatus){
        $(".toChange").attr('checked', 'checked');
    }
    else{
        $(".toChange").removeAttr('checked')
    }   
});

Demo

Collectives™ on Stack Overflow

changing the checked attribute of checkbox using jquery

HTML:

JS:

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

JS:

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related