CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxcheckboxlist
SushilB
SushilB

Reputation: 13

changing the checked attribute of checkbox using jquery

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.

Upvotes: 0

Views: 1333

Answers (3)

Aniruddha
Aniruddha

Reputation: 308

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

Upvotes: 0

Praveen
Praveen

Reputation: 56509

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

Upvotes: 0

Anton
Anton

Reputation: 32581

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

Upvotes: 2

Related Questions