Check / uncheck the array of checkboxes

Question

Here is what I have (twitter bootstrap is used here)

#html
 <ul id="my-categories">
    <li>
      <label class="checkbox">
        <input checked="checked" name="supername[]" type="checkbox" value="43243">fdsfdsfds
      </label>
    </li>

    <li>
      <label class="checkbox">
        <input checked="checked" name="supername[]" type="checkbox" value="21343">sadsadsadsadsd
      </label>
    </li>
    <li class="fdsfds"></li>
    <li>
      <a href="#" id="my-categories-btn">Check/Uncheck all</a>
    </li>
  </ul>

 # js file
 $("#my-categories-btn").click(function(){
    $("my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  })

it just doesn't work for some reason.

How do I fix it?

fyi, use `.prop()` and not `.attr()` for things like checked, readonly and disabled. you are also leaking a global variable since you forgot the `var` in front of `isChecked` — ThiefMaster, Jan 01 '13 at 11:52
Because it returns a boolean rather than the string value. See http://api.jquery.com/prop/ — Stefan, Jan 01 '13 at 11:57
Also, do you want to toggle the current selections or actually check or uncheck all checkboxes? — Stefan, Jan 01 '13 at 11:58
@Stefan, you are totally right. I want to check/uncheck all. I just paid attention to it. — Alan Coromano, Jan 01 '13 at 12:15

Adil · Answer 1 · 2013-01-01T12:41:43.007

You missed the # with my-categories also need to change this to $(this) to call attr() jQuery function because this give you DOM object and $(this) gives jQuery object and attribute could be called with jQuery object.

Live Demo

$("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        $(this).attr('checked', false);
    });
})

You do not need each here you can directly assign value to checked property

Live Demo

$("#my-categories-btn").click(function() {
    $("#my-categories input[type=checkbox]").attr('checked', false);
});

For both checking and unchecking you can use the checked status of your checkbox collection.

Live Demo

$("#my-categories-btn").click(function() {
    lst = $("#my-categories input[type=checkbox]");
    $(lst).attr('checked', !lst[0].checked);
});

Updated my answer @AlanDert for both check and uncheck using anchor. — Adil, Jan 01 '13 at 12:42

Stefan · Accepted Answer · 2013-01-01T12:23:12.293

4

I suggest you use a checkbox instead of the link you are using for checking/unchecking all checkboxes.

This way it´s possible to determine wether or not to check or uncheck all the checkboxes rather than just toggling their current state.

$('#my-categories-btn').change(function() {
    $('#my-categories input[type="checkbox"]').prop('checked', this.checked);
});

See demo using an extra checkbox.

edited Jan 01 '13 at 12:23

answered Jan 01 '13 at 12:16

Stefan

5,644
4
24
31

That's a very interesting approach. – Alan Coromano Jan 01 '13 at 12:24
Great! You can even hide the extra checkbox if you don´t want it to look like one of the options as it´s just there to hold the selection. `#my-categories-btn { display: none; }` – Stefan Jan 01 '13 at 12:29

score 1 · Answer 3 · answered Jan 01 '13 at 11:53

You need to specify my-categories as an id selector by prefixing with a #

 $("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  });

score 1 · Answer 4 · answered Jan 01 '13 at 11:54

1

Update your script-code accordingly.

$("#my-categories-btn").click(function(){
    $("#my-categories input[type=checkbox]").each(function(){
        isChecked = $(this).attr('checked');
    $(this).attr('checked', !isChecked);
    });
  })

answered Jan 01 '13 at 11:54

Avishek

1,896
14
33

Check / uncheck the array of checkboxes

4 Answers4