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");

        }

T.J. Crowder · Accepted Answer · 2011-02-18 22:16:06Z

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, 2011 at 22:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

T.J. Crowder Over a year ago

Er, and the missing reference above: Additional selectors supported by jQuery

Miguel Stevens Over a year ago

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

T.J. Crowder Over a year ago

@MiguelStevens: Just assign true or false to the checked property.

T.J. Crowder Over a year ago

@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 Over a year ago

@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.

|

Andrew Whitaker · Accepted Answer · 2011-02-18 22:36:05Z

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, 2011 at 22:36

answered Feb 18, 2011 at 22:15

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

2 Comments

T.J. Crowder Over a year ago

@Andrew: get(0) is a long way 'round too. ;-)

Andrew Whitaker Over a year ago

@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.

Ilia Draznin · Accepted Answer · 2011-02-18 22:28:56Z

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, 2011 at 22:28

Ilia Draznin

1,0562 gold badges12 silver badges24 bronze badges

Comments

amit_g · Accepted Answer · 2011-02-18 22:24:30Z

0

This would do it

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

answered Feb 18, 2011 at 22:24

amit_g

31.3k8 gold badges67 silver badges124 bronze badges

Collectives™ on Stack Overflow

Jquery find a checkbox inside a table row

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related