Finding checkbox attributes nested in table td's using jQuery

Question

I have several checkbox fields which are nested in table td's like following:

<td>
    <div class="am-checkbox ChangeCheckbox">
        <input id="check20" type="checkbox" checked="checked">
        <label for="check10"> </label> 
     </div>
</td>

Now all other checkboxes have same structure as well.... Now what I'd like to do here is to trigger a click event to change the state of checkbox and check/uncheck it when it's clicked on it...

What I have done here via jQuery is like following:

$(document).on("click", ".ChangeCheckbox", function () {
    // $('#check20').attr('checked', false);
    // console.log($(this).closest("tr"));
    // console.log($(this).closest("tr").find('td:eq(2)'));
    $(this).closest("tr").find('td:eq(2)').attr('checked', false);
});

I'm trying to find a row which triggered the event, and then it's column #2 (eq(2)) and this is the column where the checkbox is placed...

Now the only problem here that I don't know how to solve is how do I access the input checkbox type after selected second column like following:

// how to select now the checkbox and set it's attribute to unchecked?
$(this).closest("tr").find('td:eq(2)')

Can someone help me out?

$(this).closest("tr").find('td:eq(2)').find(":checkbox").attr("checked", false) api.jquery.com/checkbox-selector — fdomn-m
– fdomn-m, Commented Oct 3, 2017 at 12:59
eq is zero-based index. Use eq(1) to select second item from set. Also to change the checked state of checkbox, use .prop('checked', true). — Tushar
– Tushar, Commented Oct 3, 2017 at 13:00
@freedomn-m yes yes yes that's it , thank you so much !!! =) — User987
– User987, Commented Oct 3, 2017 at 13:00

fdomn-m · Accepted Answer · 2017-10-03 13:31:55Z

2

You can use :checkbox pseudo-selector. http://api.jquery.com/checkbox-selector

In your case, this would be:

$(this).closest("tr")
       .find('td:eq(2)')
       .find(":checkbox").att‌r("checked", false);

Edit

To toggle, it's easiest to get the checkbox first and then just use ! against the current value:

var chk = $(this).closest("tr")
                 .find('td:eq(2)')
                 .find(":checkbox");

chk.prop("checked", !chk.prop("checked"));

(we should be using .prop for checkbox checked, not .attr)

The next issue you'll find is that if you click the checkbox directly it doesn't change - because the checkbox and the tr get the click events, cancelling each out. You'll need to cancel the tick on the checkbox.

edited Oct 3, 2017 at 13:31

answered Oct 3, 2017 at 13:02

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

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

2 Comments

User987 Over a year ago

Hey freedom, how would I now combine this with a if statement to see if the checkbox is checked, if it isn't , i'd simply uncheck it, otherwise check it?

fdomn-m Over a year ago

You mean you want to toggle the value? I was wondering why you always cleared it. I'll add an edit.

Himanshu Upadhyay · Accepted Answer · 2017-10-03 13:01:53Z

1

Use parents like this:

$(this).parents("tr:first").find('td:eq(2) > input[type="checkbox"]').attr('checked', false);

edited Oct 3, 2017 at 13:01

answered Oct 3, 2017 at 12:58

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

4 Comments

fdomn-m Over a year ago

how do I access the input checkbox - this [didn't] answer the question

Himanshu Upadhyay Over a year ago

Sorry @freedomn-m, I forgot to update the answer for checkbox. I just updated it.

Karl-André Gagnon Over a year ago

Why did you change the closest("tr") to parents("tr:first")?

Himanshu Upadhyay Over a year ago

I am more familiar with parents compared to closest

Collectives™ on Stack Overflow

Finding checkbox attributes nested in table td's using jQuery

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related