Question

我希望标签与单选按钮“热”相关联。我开始使用.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="radio" name="answer1"/>
</span>
<span class="answertextwrapper">
<a href="return false">this is the text</a>
</span>
</div>

这是简化的，但它很接近。我想要的是用class =“answertextwrapper”捕获元素上的click事件，即$（“。answerwrapper”）。点击

所以我需要在单击文本时以某种方式引用输入。有意义吗？

有什么想法吗？

Answer 1

简单，使用实际的label elements;

使用它们时，不仅可以获得良好的可用性，而且它们的click事件也会绑定到单选按钮的click事件。换句话说，您不必再执行任何其他jQuery ，只需更新您的HTML。

这里有它 - 如果你有萤火虫，你可以清楚地看到$（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>

Answer 2

您可以提出某种遍历技术以满足您的需求，但我建议您使用<label> element代替：不仅是语义上正确的方法，您还可以添加{ {1}}属性将其指向输入字段，它是一个标签：

for

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

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

请注意，当您在Javascript中执行类选择器时，在之前添加标记名称会更好（请参阅注释以获取更多信息）。我也删除了空链接，因为这样做也是一种不好的做法。你应该只在你的CSS中添加游标声明，如果你想要手牌的话。

Answer 3

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

这对我来说效果最好。这样，您甚至无需通过标签元素中的属性将输入“连接”到标签。

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

3 个答案: