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

Making radio button text clickable without adding any HTML

本文关键字：添加 任何 HTML 单选按钮 文本      更新时间：2023-09-26

我知道如果你有单选按钮，你想让文本可点击，你可以把按钮包装在标签HTML标签中，就像这里描述的那样。如何使单选按钮文本也可点击呢?

但这可以不添加任何额外的HTML(通过Javascript或jQuery仅)吗?

在我的特殊情况下，我所做的是一组单选按钮在一个div中，每个单选按钮和它的文本都有一个span(但它们都有相同的名称)。下面是一个例子……

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>

无需额外的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 -它们将以完全相同的方式工作

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

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

如果你不能写新的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
      } 
 });

点击时可以强制选择:

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

相关文章：