JQuery添加点击事件来无线电输入文字 [英] JQuery Add click event to radio input text
问题描述
我希望与单选按钮热相关联的标签。我开始使用.siblings（）方法实现它。我认为一定有更好的办法。单选按钮上的单击事件如下所示：
$（。RadioButton）。click（function（event）{
var questionId = $（this）.find（'input'）。attr（'name'）;
var responseId = $（this）.find（'input'）。attr （'value'）;
var answerText = displayPopupQuizAnswer（$（this））;
这个工程很好，我希望当用户点击单选按钮上的文本标签时，可以执行相同的代码，html看起来像这样：
< div class =answers>
< span class =radiobutton>
< input type =radioname =answer1/>
< / span>
< span"" answertextwrapper">
< a href =return false>这是文字< / a>
< / span>
这是简化的，但非常接近。想要捕获class =answertextwrapper即元素上的click事件$（。answerwrapper）。点击
所以我需要在点击文本时以某种方式引用输入。有道理？
有什么想法？
标签元素;
当你使用它们时，你不仅获得了很好的可用性，而且它们的点击事件被绑定到单选按钮的点击事件。换句话说，你不必做任何额外的jQuery ，只需更新你的HTML。
这是行动 - 如果你有无论您是否实际点击相应的< code>< code>< code>< code>，您都可以清楚地看到$（this） ; 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-Typecontent =text / html; charset = utf-8>
< script type =text / javascriptsrc =http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js>< / script>
< script type =text / javascript>
$（function（）
{
$（'input.quiz-button'）。click（function（event）
{
console。日志（$（this））;
}）
}）;
< / script>
< / head>
< body>
< form id =testname =tester>
< input class =quiz-buttontype =radioname =answer1id =answer1/>
< label for =answer1>这是文字1< / label>
< input class =quiz-buttontype =radioname =answer2id =answer2/>
< label for =answer2>这是文字2< / label>
< / form>
< / body>
< / html>
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?
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>
这篇关于JQuery添加点击事件来无线电输入文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
