使用jQuery切換單選按鈕

Question

我想切換使用jQuery的幾個單選按鈕。但事實並非如此簡單。

<button id="toggler">click me</button><br> 
<input type="radio" name="speeds" value="fast" checked>fast<br> 
<input type="radio" name="speeds" value="slow">slow<br> 

$('#toggler').click(function() { 
    $('input[name="speeds"]').each(function(){ 
     $(this).prop("checked", !$(this).prop("checked")); 
    }); 
}); 

http://jsfiddle.net/beC7q/

任何人都可以請解釋爲什麼上面的代碼不能正常工作？

Answer 1

如果只有兩個單選按鈕

$('#toggler').click(function() { 
    $('input[type="radio"]').not(':checked').prop("checked", true); 
}); 

演示：Fiddle

如果有2個以上元件

var $radios = $('input[type="radio"][name="speeds"]') 
$('#toggler').click(function() { 
    var $checked = $radios.filter(':checked'); 
    var $next = $radios.eq($radios.index($checked) + 1); 
    if(!$next.length){ 
     $next = $radios.first(); 
    } 
    $next.prop("checked", true); 
}); 

演示：Fiddle

Answer 2

在一個單選按鈕組（即，input與價值相同的name）已經相互排斥。你只需要修改一個的「檢查」狀態改變整個羣體的狀態：

此代碼，例如，會始終將最後一次無線電組中的「檢查」：

$('#toggler').click(function() { 
    $('input[type="radio"][name="speeds"]').last().prop('checked', true); 
}); 

DEMO