jQuery Find child Checkbox

Question

I have a quick jQuery question:

I have the following type of table:

<table id="my_table">
  <tr>
   <td><input type="checkbox" value="24"></td>
   <td> Click Here To Check The Box </td>
   <td> Or Click Here </td>
  </tr>
 </table>

And in jQuery, I am attempting to select the corresponding checkbox in that row that was clicked.

 $("#my_table tr").click(function(e) { 
     $(this).closest(":checkbox").attr("checked", checked");
  });

But the above isn't working. Any quick ideas on selecting the checkbox on the row that was clicked? Thanks!

mVChr · Accepted Answer · 2011-02-02 04:11:35Z

40

EDIT: BEST SOLUTION AT BOTTOM

Assuming there's only one checkbox, I would attach the event to the td instead of the tr:

$('#my_table td').click(function(e){
  $(this).parent().find('input:checkbox:first').attr('checked', 'checked');
});

Example

If you want to be able to uncheck the checkbox as well...

$('#my_table td').click(function(e) {
    var $tc = $(this).parent().find('input:checkbox:first'),
        tv = $tc.attr('checked');

    $tc.attr('checked', !tv);
});

This function needs to be applied to the checkbox as well to negate the default behavior.

Example 2

EDIT: The solution is most reasonable method is to cancel the functionality if the target is an input: http://jsfiddle.net/EXVYU/5/

var cbcfn = function(e) {
    if (e.target.tagName.toUpperCase() != "INPUT") {
        var $tc = $(this).parent().find('input:checkbox:first'),
            tv = $tc.attr('checked');
        $tc.attr('checked', !tv);
    }
};

$('#my_table td').live('click', cbcfn);

edited Feb 2, 2011 at 4:11

answered Feb 2, 2011 at 3:28

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

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

8 Comments

Dodinas Over a year ago

Thanks mVChr. Great links to the example, and I like the uncheck ability as well. Cheers!

Dodinas Over a year ago

Actually, I just had one updated question. I noticed that in this example, you can't even click the "checkbox" itself. Any way to get around this?

mVChr Over a year ago

Look at the example 2 again. I fixed that.

Dodinas Over a year ago

Okay, sorry to complicate this more. I appreciate your help. Please check out: jsfiddle.net/EXVYU/3 The table I'm loading is via Ajax, so I need to use the jquery live method. But, my modified function does not appear to work. Clicking the checkbox still doesn't work. Click the <td> does work, however.

mVChr Over a year ago

@clockw0rk instead of :first you can use :eq(4) or whatever. See jQuery API docs.

|

Michael · Accepted Answer · 2012-10-05 20:50:26Z

4

The jQuery closest() method finds the closest parent.

You really want to search child elemets, You can try the following:

 $("#my_table tr").click(function(e) { 
     $(":checkbox:eq(0)", this).attr("checked", "checked"); 
  });

basically you are searching for the first checkbox found in the table row

some reference

jQuery :eq() selector

......

edited Oct 5, 2012 at 20:50

Michael

1,8867 gold badges22 silver badges35 bronze badges

answered Feb 2, 2011 at 3:28

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

Comments

Joko Wandiro · Accepted Answer · 2011-02-02 03:59:08Z

1

$("#my_table tr").click(function(e) {
    state= $(this).find(":checkbox:eq(0)").attr("checked");
    if (state==true){ // WITH TOGGLE
        $(this).find(":checkbox:eq(0)").removeAttr("checked");
    }else {
        $(this).find(":checkbox:eq(0)").attr("checked", "checked");
    }       
});

I make simple script to check first checkbox in specific tr. about toggle i just make it to try before post this answer.

answered Feb 2, 2011 at 3:59

Joko Wandiro

1,9872 gold badges18 silver badges29 bronze badges

Comments

Vivek · Accepted Answer · 2011-02-02 03:31:04Z

-1

try this also...

 $("#my_table tr").click(function(e) { 
 $(this).closest("type:checkbox").attr("checked", checked");
});

answered Feb 2, 2011 at 3:31

Vivek

11k15 gold badges51 silver badges68 bronze badges

1 Comment

John Hartsock Over a year ago

This is just wrong as the jQuery closest() method works up the DOM tree. Meaning it will find the closest parent that matches.

Collectives™ on Stack Overflow

jQuery Find child Checkbox

4 Answers 4

8 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related