在不添加任何 HTML 的情况下使单选按钮文本可点击答案

【问题标题】：Making radio button text clickable without adding any HTML在不添加任何 HTML 的情况下使单选按钮文本可点击
【发布时间】：2015-10-25 12:22:47
【问题描述】：

我知道如果您有单选按钮并且想要使文本可点击，您可以将按钮包装在标签 HTML 标记中，如此处所述How do you make the radio button text to be clickable too?。

但这是否可以在不添加任何额外 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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以在点击时强制选择：

$(function() {
  $('span.team').on('click', function(e) {
    $(this).children('input[name=team]').prop('checked', true); // mark this
  });
});

span.team {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

【讨论】：

【解决方案2】：

无需额外的 HTML，使用 jQuery (fiddle)：

$('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 - 它们的工作方式完全相同。

【讨论】：

将 stopPropagation 添加到单击单选按钮。然后你会得到一个 1 :)
您必须在单击单选按钮时放置 stopPropagation 而不是包含它们的跨度
@TejasvaDhyani 哎呀！效果仍然几乎相同 - 只是单击单选按钮不起作用！对不起！更新！ :)
没关系，至少现在是这样。试着让它变得万无一失。考虑用户再次单击单选按钮，但不知何故他无法反转其状态的情况。（默认单选按钮行为不支持取消选中单选按钮）。如果需要，您也可以实现此功能。干杯！

【解决方案3】：

一种可能性是通过代码将span 元素替换为label 元素。
但只有在 JavaScript 代码的其他地方没有使用 span 元素时才这样做。

$('span.team').each(function() {
    $('<label>').addClass('team').html($(this).html()).insertAfter($(this);
    $(this).remove();
});

【讨论】：

【解决方案4】：

如果你不会写新的html，你可以用jquery：

 // make click in anywhere of the span
 $('span.team').on('click', function() {
      var radio = $(this).find('input[type=radio]'); // the input
      if(radio.prop('checked')) {
          radio.prop('checked', false); // checking false
      } else {
          radio.prop('checked', true); //checking true
      } 
 });

【讨论】：

我认为这个问题是当单选按钮被点击时，跨度的点击也会触发，因此再次在同一个单选按钮上工作。在这种情况下，您必须提供 stopPropagation 以防单击单选按钮。但是，我认为您可以不使用单选按钮，但要考虑它们是否是复选框。
是的，这个代码是一个近似值。显然有很多测试要做。