18

これが私のHTMLだとしましょう:

<input type="radio" name="rad" id="Radio0" checked="checked" />
<input type="radio" name="rad" id="Radio1" />
<input type="radio" name="rad" id="Radio2" />
<input type="radio" name="rad" id="Radio4" />
<input type="radio" name="rad" id="Radio3" />

ご覧のとおり、最初のラジオ ボタンがオンになっています。トグルのように機能するラジオボタンが必要です。たとえば。もう一度クリックするとradio0、すべてのラジオ ボタンがオフになります。

どうすればそれを達成できますか？

更新:余分なボタンは必要ありません。たとえば。ボタンを追加して、すべてのラジオ ボタンの checked プロパティを false に設定できます。しかし、私はそれを望んでいません。フォームをこれら 4 つのラジオ ボタンだけで構成したいのです。

更新:ほとんどの人は私が何を望んでいるのか理解していないので、言い換えてみます。ラジオ ボタンをトグル モードで機能させたいのです。すべてのラジオ ボタンに同じ名前を付けたので、それはグループです。ここで、ラジオボタンを自分自身で切り替えたいと思います。例えば。radio0 をクリックすると、チェックされている場合はチェックされず、チェックされていない場合はチェックされます。

4

7 に答える 7

31

問題は、ラジオ ボタンがクリックされるとすぐに、チェックする前にその状態が変更されることです。私が提案するのは、カスタム属性を追加して、次のように各ラジオの以前の状態を追跡することです。

$(function(){
    $('input[name="rad"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

また、最初にチェックしたラジオ マークアップにこの属性を追加する必要があります。

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

ここでデモを参照してください: http://jsfiddle.net/GoranMottram/VGPhD/2/

于 2013-02-27T06:39:22.140 に答える
11

2 つ以上のラジオ ボタンに同じ名前を付けると、それらは自動的にグループになります。そのグループでは、チェックできるラジオ ボタンは 1 つだけです。あなたはすでにこれを達成しています。

于 2013-02-27T06:22:56.027 に答える