使單選按鈕文字可點擊，不添加任何HTML

Question

我知道，如果你有單選按鈕，你想使文字可點擊，您可以在標籤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> 

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>

這將改變光標到matc小時label元素的樣式，也取消選擇上再點擊一下當前選定的單選按鈕。

---

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

Answer 2

如果你不能寫新的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 3

一種可能性是，以取代span元件與label元件由代碼。
但是，只有做到這一點，如果span元素不會在JavaScript代碼的其他地方使用。

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

Answer 4

您可以強制選擇上點擊：

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