Jquery find a checkbox inside a table row

Question

My html

<TR class="datarow" id="rowId"><TD>1</TD><TD>895171</TD><td class="classID"><INPUT type="checkbox" /></TD></TR>

how do I use Jquery to find out whether the checkbox in this particular row is checked or not. Assume that i know the unique rowId.

Currently, I am doing this

var checkbox = $('#' + rowId + " td input:checkbox");

        if (checkbox.checked) {
           alert("checked");
        } else {
           alert("unchecked");
        }

But this doesn't seem to detect when the checkbox is checked.

EDITED Curiously, the following didn't work either:

        var curRow = $('#' + curRowId);
        var checkbox = $(curRow).find('input:checkbox').eq(0);



        if (checkbox.checked) {
           alert("checked");

        } else {
           alert("unchecked");

        }

score 9 · Accepted Answer · answered Feb 18 '11 at 22:16

9

You can do this:

var isChecked = $("#rowId input:checkbox")[0].checked;

That uses a descendant selector for the checkbox, then gets the raw DOM element, and looks at its checked property.

References for selectors:

Selectors supported by most browsers: CSS 2.1
Newer selectors supported by some browsers and by various JavaScript libraries (for interacting with the DOM): CSS3 Selectors

answered Feb 18 '11 at 22:16

T.J. Crowder

1,031,962
187
1,923
1,875

Er, and the missing reference above: [Additional selectors supported by jQuery](http://api.jquery.com/category/selectors/) – T.J. Crowder Feb 18 '11 at 22:23
This is working! Could you provide a solution on how to set it selected if it's not? I can't seem to find it #confused – Miguel Stevens Mar 13 '14 at 15:50
@MiguelStevens: Just assign `true` or `false` to the `checked` property. – T.J. Crowder Mar 13 '14 at 15:54
@MiguelStevens: "Assignment" is one of the most basic programming operations. `a = b` assigns the value of `b` to `a`. So `$("#rowId input:checkbox")[0].checked = true;` assigns `true` to the `checked` property of the DOM object found via the jQuery expression. – T.J. Crowder Mar 13 '14 at 16:08
Thanks! It's just that there's so many ways of assigning things in jQuery :) this one's working! – Miguel Stevens Mar 13 '14 at 16:30
1

@MiguelStevens: Actually, a more jQuery-ish way would use `prop`: `$("#rowId input:checkbox").prop("checked", true);`. That also has the characteristic (advantange or disadvantage, depending on your point of view) that it won't cause an error if the selector didn't find anything. – T.J. Crowder Mar 13 '14 at 16:33

Andrew Whitaker · Answer 2 · 2011-02-18T22:36:05.860

4

Updated:

var rowId = "";
var checked = $("#" + rowId + " input:checkbox")[0].checked;

Your original code does not work because you're calling checked on a jQuery result set. You need to get out the actual DOM element, which you can do by calling get() (Or by indexing the object directly like in T.J.'s answer). Since there's only one result, you want the element at index 0 in the result set.

Edit after seeing updated code in OP:

Using eq() reduces the matched elements to the one at the specified index. Effectively this will return a jQuery result set with one matched object--the one you requested at the specified index. It still doesn't return a DOM element, which you need to use the checked property.

edited Feb 18 '11 at 22:36

answered Feb 18 '11 at 22:15

Andrew Whitaker

124,656
32
289
307

@Andrew: `get(0)` is a long way 'round too. ;-) – T.J. Crowder Feb 18 '11 at 22:20
1

@gnomixa: The problem is that executing a jQuery selector returns *a set of matched elements*. Your code will not work because `checked` is not a property or function of the jQuery result set. You need to pull out the actual DOM element returned by the selector, which you can do by directly indexing the object as shown above. `eq(0)` won't work because it retrieve's a single result in the jQuery result set--but still wrapped in a jQuery object. – Andrew Whitaker Feb 18 '11 at 22:31

score 2 · Answer 3 · answered Feb 18 '11 at 22:28

2

If you only have one checkbox per row this is the quickest way

!!$('#rowId input:checked').length

You can also omit the !! and check against '>0' but I think the !! is actually faster

answered Feb 18 '11 at 22:28

Ilia Draznin

1,026
2
12
24

score 0 · Answer 4 · answered Feb 18 '11 at 22:24

0

This would do it

var checked = $("#rowId" + rowId + " td.classID input:checkbox").is(":checked");

answered Feb 18 '11 at 22:24

amit_g

30,880
8
61
118

Jquery find a checkbox inside a table row

4 Answers4

Linked