jQuery checkbox check/uncheck [duplicate]

Question

What would be a proper way to check/uncheck checkbox that's placed inside the element that triggers my function?

Here's my code:

<table id="news_list">
<tr>
    <td><input type="checkbox" name="news[1]" /></td>
    <td>TEXT</td>
</tr></table>

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.removeAttr('checked');
        $(this).removeClass('admin_checked');
    }else{
        ele.attr('checked', 'checked');
        $(this).addClass('admin_checked');
    }
});

The problem is I can check and uncheck each box only once. After I've checked and unchecked sometimes it still does add/remove class, but never checking a box again (even when I click on checkbox, not table row).

I've tried using .bind('click') trigger, but it's the same result.

Any solutions?

Looking at the answers, I'm not so sure they give a solution to what you are trying to do. I don't see why it would make sense to basically disable checkbox, which is what those given answers are doing ( Because when you click the checkbox it becomes checked and that means the if statement will immediately uncheck it... and that means you can never actually check the checkbox by clicking the actual checkbox... right? ). Is this what you are looking to do?: jsfiddle.net/7gbhf — Joonas
– Joonas, Commented Feb 8, 2013 at 10:24
@Joonas Thanks, this is exactly what i needed! Jai's answer did work for signle row, not for multiple — user1587985
– user1587985, Commented Feb 8, 2013 at 10:49
Good. One thing though. If my jsfiddle is exactly what you need, I'm not sure I see how Jai's answer works for one row. It doesn't let you check the checkbox by clicking the checkbox, which is due to the if statement as I explained above. So I'm thinking that you missed that part, or... I still don't know what you wanted :) — Joonas
– Joonas, Commented Feb 8, 2013 at 10:55

Peter Mortensen · Accepted Answer · 2017-05-21 10:58:56Z

48

Use .prop() instead and if we go with your code then compare like this:

Look at the example jsbin:

  $("#news_list tr").click(function () {
    var ele = $(this).find(':checkbox');
    if ($(':checked').length) {
      ele.prop('checked', false);
      $(this).removeClass('admin_checked');
    } else {
      ele.prop('checked', true);
      $(this).addClass('admin_checked');
    }
 });

Changes:

Changed input to :checkbox.
Comparing the length of the checked checkboxes.

edited May 21, 2017 at 10:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 8, 2013 at 10:03

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

4 Comments

machineaddict Over a year ago

prop didn't worked for me, but removeAttr and attr did, using jQuery 1.9.1.

Nick Lewis Over a year ago

Thanks, prop has sorted out a different issue for me, so found this piece of info very useful.

ppostma1 Over a year ago

if this doesn't work, ensure the IDs are not duplicated between elements

Jai Over a year ago

Thanks for the edits @PeterMortensen

Adil · Accepted Answer · 2014-07-03 05:33:00Z

21

Use prop() instead of attr() to set the value of checked. Also use :checkbox in find method instead of input and be specific.

Live Demo

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.prop('checked', false);
        $(this).removeClass('admin_checked');
    }else{
        ele.prop('checked', true);
        $(this).addClass('admin_checked');
    }
});

Use prop instead of attr for properties like checked

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method

edited Jul 3, 2014 at 5:33

answered Feb 8, 2013 at 9:30

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Andriy F. Over a year ago

api.jquery.com/checkbox-selector Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="checkbox"] instead.

Manik Over a year ago

Actually this is the correct solution . Accepted answer have some problem.Thank you for this solution .

Community · Accepted Answer · 2018-04-27 14:38:35Z

6

 $('mainCheckBox').click(function(){
    if($(this).prop('checked')){
        $('Id or Class of checkbox').prop('checked', true);
    }else{
        $('Id or Class of checkbox').prop('checked', false);
    }
});

edited Apr 27, 2018 at 14:38

CommunityBot

11 silver badge

answered Jul 16, 2013 at 2:14

mahmoh

8021 gold badge9 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox check/uncheck [duplicate]

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Related