jQuery checkbox check/uncheck

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?: http://jsfiddle.net/7gbhf/ — Joonas, Feb 08 '13 at 10:24
@Joonas Thanks, this is exactly what i needed! Jai's answer did work for signle row, not for multiple — user1587985, Feb 08 '13 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, Feb 08 '13 at 10:55

score 48 · Accepted Answer · edited May 21 '17 at 10:58

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 '17 at 10:58

Peter Mortensen

30,738
21
105
131

answered Feb 08 '13 at 10:03

Jai

74,255
12
74
103

`prop` didn't worked for me, but `removeAttr` and `attr` did, using jQuery 1.9.1. – machineaddict Apr 17 '14 at 14:58
Thanks, prop has sorted out a different issue for me, so found this piece of info very useful. – Nick Lewis Dec 22 '14 at 11:04
if this doesn't work, ensure the IDs are not duplicated between elements – ppostma1 May 05 '16 at 17:20
Thanks for the edits @PeterMortensen – Jai May 23 '17 at 11:08

Adil · Answer 2 · 2014-07-03T05:33:00.143

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 03 '14 at 05:33

answered Feb 08 '13 at 09:30

Adil

146,340
25
209
204

http://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. – Andriy F. Jul 16 '13 at 10:21
2

Actually this is the correct solution . Accepted answer have some problem.Thank you for this solution . – Manik Apr 10 '17 at 12:01

score 6 · Answer 3 · edited Apr 27 '18 at 14:38

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 '18 at 14:38

Community

1
1

answered Jul 16 '13 at 02:14

mahmoh

802
1
9
15

jQuery checkbox check/uncheck

3 Answers3

Linked