Question

我知道如果您有单选按钮并且您想要使文本可单击，您可以按照此处所述How do you make the radio button text to be clickable too?将标签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（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 - 它们将以完全相同的方式工作。

Answer 2

一种可能性是用代码替换span元素和label元素但只有在JavaScript代码中的其他地方未使用span元素时才执行此操作。

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

Answer 3

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

Answer 4

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

＆＃13;

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

＆＃13;

span.team {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

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

4 个答案: