10

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/

上記のコードが機能しない理由を誰か説明してもらえますか?

4

2 に答える 2

34

ラジオボタンが2つしかない場合

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

デモ:フィドル

要素が 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);
});

デモ:フィドル

于 2013-10-02T16:28:28.597 に答える
9

グループ内のラジオ ボタン (つまり、input同じname値を持つ ) は、既に相互に排他的です。グループ全体の状態を変更するには、1 つの「チェック済み」状態を変更するだけで済みます。

たとえば、次のコードは常にグループ内の最後のラジオを「チェック済み」に設定します。

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

DEMO

于 2013-10-02T16:32:32.403 に答える