JQuery td onclick to set checkbox, no bubbles

I would like to be able to click the td element in the table and check it or uncheck the box in sibling td on the same line.

  • Clicking on the checkbox should work fine.
  • Clicking on the td element, this check box is in the check box should also be checked.
  • Pressing another td should not require double clicks (reset click) due to poor switching implementation.

Violin: http://jsfiddle.net/cJ2us/

Please note: yes, this is very similar to a number of questions, please do not associate any duplicates if you really do not understand the problem that I have and how the answers to them do not correspond to my question. eg.

JQuery event on completed input radio definition "checked" event No flags

jQuery onclick div checks the toggle checkbox does not allow clicking on a separate td to perform each check and unchecking

Find the checkbox in Sibling <td> and check it with jQuery does not match this example, the code actually does not work, as the author of the message

Saying this, if you find a hoax that fits, let me know! I just want a workable solution.

+7
source share
4 answers

It works, is that what you need?

$("td").click(function(e) { var chk = $(this).closest("tr").find("input:checkbox").get(0); if(e.target != chk) { chk.checked = !chk.checked; } }); 

demo here

+11
source

http://jsfiddle.net/U3636/

Sorry guys, thanks for the help, but I came up with this that fits my needs.

+2
source

Use shortcuts.

 <label for='cheboxID'>LABEL</label> 

Here is the js solution: http://jsfiddle.net/maniator/eWh5F/

 $("td").click(function(e) { var checkbox = $(':checkbox', $(this).parent()).get(0); var checked = checkbox.checked; if (checked == false) checkbox.checked = true; else checkbox.checked = false; }); 
+1
source
 $("td").click(function(e) { var $checkbox = $("input[type='checkbox']"); $checkbox.attr('checked', !$checkbox.attr('checked')); }); 

http://jsfiddle.net/cJ2us/12/

+1
source

All Articles