I have an unordered list containing radio inputs and labels. When a user clicks on the list item it toggles some info and selects the radio input.
However, due to the above, if the user clicks onto the actual radio input itself, it does not select it, as I guess the click is registered against the radio and not the list item itself?
Is there any cure?
jQuery('#sdmlist li.item').click(function(e) {
jQuery('#sdmlist li.item address').slideUp();
jQuery("address",this).slideToggle("slow");
jQuery("input[type=radio]", this).attr('checked',true);
var element = jQuery("input[type=radio]", this).val();
...
return false;
});
and some html:
<ul id="sdmlist">
<li class="item"><input type="radio" name="1" id="1">1 <address>test 123</address></li>
<li class="item"><input type="radio" name="2" id="2">2 <address>test 23</address></li>
<li class="item"><input type="radio" name="3" id="3">3 <address>test 3</address></li>
</ul>
That behavior is caused by return false
stopping the default behavior of the click event who has been propagated by then click on the radio. The default behavior of the radio is, of course, the radio beign checked.
Just remove the return false
and it work : http://jsfiddle.net/4v9R9/2/