Select radio button from a tr onclick
Here's my tr which is inside a form:
<tr id="mlevel" class="__tr_class__" onclick="needFunction()">
<td class="checkbox"><input type="radio" name="membership" id="__ID__" value="__ID__" /></td>
<td class="icon"><img src="__Icon__" width="60" height="60"/></td>
<开发者_开发百科;td class="name"><h2>__Name__</h2></td>
<td class="price"><h4>__Price__ for __Days__ Days</h4></td>
<td class="auto"><h4>__Auto__</h4></td>
<td class="auto"><h4>__Active__</h4></td>
</tr>
When I click on the tr I want the Radio Input to be selected. I would like to use jquery or something simple. Just not sure which way to go. Does anyone know of a simple function to do this?
You don't really need a function, the following should work:
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
}
);
Edited in response to @whatshakin's question:
that works perfectly. Can you explain: $('input[type=radio]',this)
This looks for an element that matches the 'input[type=radio]' using a CSS3 style attribute selector (looking for input
elements of type="radio"
) within the context of this
(this
being the current object, in this instance the tr
).
A slightly more authoritative description/explanation of how this works is at api.jquery.com/jQuery
Edited because it was irritating me that the radio couldn't be un-checked, the following corrects that:
$(document).ready(
function() {
$('tr').toggle(
function(){
$('input:radio', this).attr('checked',true);
},
function() {
$('input:radio', this).attr('checked',false);
}
);
}
);
With thanks @Thomas (in comments) for pointing out the erroneous assumption I made in the previous code, that while $(this).attr('checked','checked')
evaluates to true, obviously ''
wouldn't evaluate to false. Hopefully this approach rectifies that earlier naïveté and silliness.
Also: demo located at jsbin
Edited the above code (the one using
toggle()
) in response to @Tim Büthe's comment:
Why don't you use the ":radio" pseudo selector?
A pseudo-selector that I didn't even know about until I read his comment, and then visited the jQuery API.
Here's a neat toggle that works without inline Javascript (and with multiple radio buttons):
The Code:
$(function() { // <== Doc ready
$('tr').click(function(event) {
if(event.target.type != "radio") {
var that = $(this).find('input:radio');
that.attr('checked', !that.is(':checked'));
}
});
});
jsFiddle example
The Breakdown:
Create a
.click()
handler for alltr
elements with$(tr).click()
In the handler assign a variable to the radio button within the tr using
$(this).find('input:radio')
. This looks through all the descendants ofthis
(thetr
clicked) and finds the radio buttons. The jQuery context uses.find()
in its implementation, so the previous is synonymous with$('input:radio', this)
Set the
checked
attribute of the radio button to the opposite of what it is. Things can be checked or unchecked withtrue
orfalse
, and.is(':checked)
returnstrue
orfalse
.!that.is(':checked')
simply is the opposite of the currently checked state. Note that we don't want to fire this action if the user clicks directly on the radio button, since that'd cancel the native effect of the check, so we useif (event.target.type != "radio")
.
精彩评论