使单选按钮文本可单击而不添加任何HTML

Question

我知道如果您有单选按钮并且您想要使文本可单击,您可以将按钮包装在标签HTML标签中,如此处所述如何使单选按钮文本也可单击？.

但是这可以在不添加任何额外HTML(仅通过Javascript或jQuery)的情况下完成吗？

在我的特定情况下,我所拥有的是一组单选按钮位于div内,每个收音机及其文本都有一个跨度(但它们都具有相同的名称).这是一个例子..

Which team will win the world series in 2015?
   <div id="teams"><span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
 <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
 <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
 </div>

Answer 1

没有额外的HTML,使用jQuery(小提琴):

$('span.team').css('cursor', 'default').click(function(e) {
  var cur = $(this).find('input[type="radio"]').prop('checked')
  $(this).find('input[type="radio"]').prop('checked', !cur); //true turns false and vice versa
});

$('input[type="radio"]').click(function(e) {
  e.stopPropagation(); //otherwise the actual radio buttons won't work properly
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Which team will win the world series in 2015?
<div id="teams">
  <span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
  <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
  <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
</div>

这将更改光标以匹配label元素的样式,并在另一次单击时取消选择当前选定的单选按钮.

但是,你可能只是改变你span的到label的-他们会以完全相同的方式工作.