Jquery event on completed input radio definition "checked" event

Question

I want to check and uncheck (switch) the radio when "td" clicks but saves the default input event

<table> <tr> <td> <input type='radio'> </td> </tr> </table> 

My code attempts:

Try 1: http://jsfiddle.net/UJXRu/

Try 2: http://jsfiddle.net/UJXRu/1/

Try 3: http://jsfiddle.net/UJXRu/2/

Preview:

 $("td").click(function(e) { if (!$(e.target).is("input")) { var bool = !$(this).children("input").is(':checked'); $(this).children("input").attr("checked", bool) } else{ var bool2 = !$(e.target).is(':checked'); $(e.target).attr('checked',bool2); } }); 

Answer 1

Try it.

 $("td").click(function(e) { if (e.target.type !== 'radio') { $(this).find(":radio").trigger('click'); } }); 

Jsfiddle example.

If you want the td and radio switch toggle the radio checked property, you could do something like this:

 $("td").toggle(function() { $(this).children(":radio").attr("checked", true); }, function() { $(this).children(":radio").attr("checked", false); }); 

Jsfiddle example

Answer 2

Why not just trigger the default click event for the input tag:

 $(this).children("input").click(); 

Answer 3

Responding to your comment:

"I want to check the switch when I press both td and the radio button

It should be as simple as:

 $("td").click(function(e) { $(this).find("input").attr("checked", true); }); 

http://jsfiddle.net/lukemartin/UJXRu/3/

Answer 4

This answer does not treat the switches as checkboxes (users really don't like it) and try to create a slightly more realistic script.

 $("tr.myRow").click(function(e) { // dont override the radio inputs default if ($(e.target).hasClass("childRadio") || e.target.tagName == 'LABEL') return; // find the child radio, and if it not checked, check it. var $childRadio = $("input.childRadio", $(this)); if (!$childRadio.attr('checked')) { $childRadio.attr('checked', 'checked'); } }); 

I ran into the problem of adding labels and used the name property so that the switches are grouped (which is the reason for the presence of the switches). Thus, this preserves the maximum possible behavior by default and simply increases clicks to select a specific child radio button.

Below is an example html.

 <tr class="myRow"> <td> <div>Some Content</div> <div> <label for="radio1">Radio 1 Label</label> <input type='radio' id="radio1" class="childRadio" checked="checked" name="Group1"> </div> <div>More Content</div> </td> </tr> <tr class="myRow"> <td> <div> <label for="radio2">Radio 2 Label</label> <input type='radio' id="radio2" class="childRadio" name="Group1"> </div> </td> </tr>