Menu
I would like the label associated with a radio button 'hot'. I started to implement this using the .siblings() method. I think there must be a better way. The click event on the radio button looks like this:
$(".RadioButton").click(function(event) {
var questionId = $(this).find('input').attr('name');
var responseId = $(this).find('input').attr('value');
var answerText = displayPopupQuizAnswer($(this));
This works great. I would like the same code to execute when the user clicks on the text label accompanying the radio button. The html looks something like this:
<div class="answers">
<span class="radiobutton>
<input type="radio" name="answer1"/>
</span>
<span class="answertextwrapper">
<a href="return false">this is the text</a>
</span>
</div>
This is simplified but it's close. What I want is to capture the click event on the element with class="answertextwrapper" i.e. $(".answerwrapper").click
So I need to somehow reference the input when the text is clicked. Make sense?
Any ideas?
839
Simple, use actual label elements;
When you use these, not only do you gain nice usability, but their click event is bound to the radio button's click event. In otherwords, you don't have to do any additional jQuery, just update your HTML.
Here it is in action - if you have firebug you can clearly see that $(this) always refers to the <input>, regardless of whether or not you actually click on the corresponding <label>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$('input.quiz-button').click( function( event )
{
console.log( $(this) );
})
} );
</script>
</head>
<body>
<form id="test" name="tester">
<input class="quiz-button" type="radio" name="answer1" id="answer1"/>
<label for="answer1">this is the text 1</label>
<input class="quiz-button" type="radio" name="answer2" id="answer2"/>
<label for="answer2">this is the text 2</label>
</form>
</body>
</html>
You can come up with some sort of traversing technique to suit your needs, but I recommend you use the <label> element instead: not only is it the semantically correct way of doing this, you can then add in the for attribute to point it back to the input field it is a label of:
<div class="answers">
<span class="radiobutton>
<input type="radio" name="answer1" id="answer1"/>
</span>
<label class="answertextwrapper" for="answer1">
this is the text
</label>
</div>
And then your Javascript can look like this:
$("span.RadioButton").click(function(event) {
//...
});
Note that it is much better to prepend the tag name when you are doing class selectors in Javascript (see comments for more). I also removed the empty link as doing it that way is a bad practice as well. You should just add the cursor declaration in your CSS instead if you want the hand to come up.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
