使单选按钮文字可点击，不添加任何HTML

我知道，如果你有单选按钮，你想使文字可点击，您可以在标签HTML标记这里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>

来源

2015-08-03 AbuMariam

没有额外的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>

这将改变光标到matc小时label元素的样式，也取消选择上再点击一下当前选定的单选按钮。

然而，你可能只是改变你的span年代到label的 - 他们会以完全相同的方式工作。

来源

2015-08-03 11:56:52

将停止传播添加到单选按钮的点击。然后你会得到一个1 :) –

@TejasvaDhyani完成:)感谢提醒我！ –

你必须在单击按钮上放置停止传播而不是包含它们的跨度 –

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

来源

2015-08-03 11:55:44

我认为这个问题是在点击单选按钮时，则还跨度的点击就会触发，从而再次在同一个单选按钮上工作。在这种情况下，如果单击单选按钮，则必须提供stopPropagation。不过，我认为你可以逃避单选按钮，但考虑它们是否是复选框。 –

是的，这个代码是aproximation。显然有很多测试要做。 –

一种可能性是，以取代span元件与label元件由代码。
但是，只有做到这一点，如果span元素不会在JavaScript代码的其他地方使用。

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

来源

2015-08-03 11:57:45 Raidri

您可以强制选择上点击：

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

来源

2015-08-03 12:27:26 Arvind

使单选按钮文字可点击，不添加任何HTML

回答

相关问题