JQuery将单击事件添加到无线电输入文本

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:

我希望标签与单选按钮“热”相关联。我开始使用.siblings()方法实现它。我认为必须有更好的方法。单选按钮上的单击事件如下所示:

$(".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:

这非常有效。我希望当用户点击单选按钮旁边的文本标签时执行相同的代码。 html看起来像这样:

<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

这是简化但很接近。我想要的是用class =“answertextwrapper”捕获元素上的click事件,即$(“。answerwrapper”)。click

So I need to somehow reference the input when the text is clicked. Make sense?

因此,我需要在单击文本时以某种方式引用输入。合理?

Any ideas?

3 个解决方案

#1

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.

当您使用它们时,不仅可以获得良好的可用性,而且它们的单击事件也会绑定到单选按钮的单击事件。换句话说,您不必再执行任何其他jQuery,只需更新您的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>

这里有它 - 如果你有firebug,你可以清楚地看到$(this)总是引用,无论你是否真的点击相应的

<!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>

#2

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:

您可以提出某种遍历技术以满足您的需求,但我建议您使用元素:不仅是语义上正确的方法,您可以添加for属性来指向它回到输入字段,它是一个标签:

<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:

然后你的Javascript看起来像这样:

$("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.

请注意,在Javascript中执行类选择器时,最好先添加标记名称(有关详细信息,请参阅注释)。我也删除了空链接,因为这样做也是一种不好的做法。您应该只在CSS中添加游标声明,如果您想要手牌出现的话。

#3

<div class="answers">
<label class="answertextwrapper"><input type="radio" name="answer1"/> this is the text</label>
</div>

This works the best for me. This way you don't even need to "connect" the input to the label via for property in label element.

这对我来说是最好的。这样,您甚至不需要通过label元素中的属性将输入“连接”到标签。

#1