Home/ Questions/Q 283089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T05:20:38+00:00

I would like the label associated with a radio button ‘hot’. I started to

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0