JQuery将单击事件添加到无线电输入文本
[英]JQuery Add click event to radio input text
问题描述
I would like the label associated with a radio button 'hot'. 
我希望标签与单选按钮“热”相关联。 I started to implement this using the .siblings() method. 我开始使用.siblings（）方法实现它。 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: 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" ie $(".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
30 已采纳 2009-07-21 19:39:26
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）总是引用<input> ，无论你是否真的点击相应的<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>
解决方案2
5 2009-07-21 19:29:10
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: 您可以提出某种遍历技术以满足您的需求，但我建议您使用<label>元素 ：不仅是语义上正确的方法，您可以添加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). 需要注意的是更好的预先设置的标签名，当你在Javascript中做类选择（详见注释）。 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. 您应该只在CSS中添加游标声明，如果您想要手牌出现的话。
解决方案3
2 2009-07-22 12:41:03
<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. 这样，你甚至不需要通过在 标签元素属性输入“连接”的标签。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.