ラジオボタンのチェックを外す方法は?


482

jQueryを使用してAJAXフォームが送信された後、オフにしたいラジオボタンのグループがあります。次の機能があります。

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

この機能を使用して、テキストボックスの値をクリアできますが、ラジオボタンの値はクリアできません。

ちなみに私も試しまし$(this).val("");たがうまくいきませんでした。


3
各関数は必要ありません。jQueryオブジェクトで必要な関数を呼び出すだけです。以下の私の答えを参照してください
ジェームズワイズマン

1
each()関数は必要ありません。jQuery( "input:radio")。removeAttr( "checked");
Jitendra Damor

回答:


737

どちらか(プレーンjs)

this.checked = false;

または(jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

参照jQueryの小道具()ヘルプページの違いの説明のためのattr()支柱()と理由小道具は()今が望ましいです。
prop()は、2011年5月にjQuery 1.6で導入されました。


29
PPL、彼の行動はの賛成で1.6に変化していることに注意してprop()いる間は、.attr()実際の属性に制限されます
ファビアーノSoriani

ここでプレーンJSを使用するのが最善ですか?
Doug Molineux

14
@ピート:jQueryでシステムを構築している場合、別の利点として、これを別の方法で処理するブラウザーがある場合、ブラウザーのサポートをライブラリーに委任できるということです。ただし、ソフトウェアが現在jQueryを使用していない場合、このためだけにライブラリを実際に含めることはオーバーヘッドに値しません。
David Hedlund、2011年

@David Hedlund:すべての主要なブラウザーがこれを今日と同じ方法で処理することを暗示していると思いますよね?
ショーン

2
@qris:あなたの問題はおそらくどこか別の場所にあります。jQuery 1.9を使用した簡単なデモ。もちろん、Chromeで動作します。
David Hedlund 2013年

88

each関数は必要ありません

$("input:radio").attr("checked", false);

または

$("input:radio").removeAttr("checked");

同じことがあなたのテキストボックスにも当てはまるはずです:

$('#frm input[type="text"]').val("");

しかし、これを改善することができます

$('#frm input:text').val("");

2
.removeAttrは問題を引き起こす可能性があります。
Kzqai 2013年

どのように拡張するか?またはリンクを提供しますか?
James Wiseman

はい、Kzqai、私も私の回答がこれに反対票を投じられたことにも興味があります。ドキュメンテーションはリスクを述べていません。
cjstehno 2013年

1
関連するドキュメントは実際には.prop()メソッド にあります:api.jquery.com/prop Quote "プロパティは通常、シリアル化されたHTML属性を変更せずにDOM要素の動的な状態に影響します。例としては、入力要素のvalueプロパティ、無効化されたプロパティなどがあります。入力とボタンの組み合わせ、またはチェックボックスのcheckedプロパティです。.attr()メソッドの代わりに.prop()メソッドを使用して無効とチェックを設定する必要があります。値の取得と設定には.val()メソッドを使用する必要があります」つまり、...
2013年

1
...つまり、.attr()は、DOMではなくシリアル化されたhtml属性である.prop()とは異なる基盤のソースを変更しますが、これは現在互換性がある可能性があります(たとえば、jatt 1.9は、.attr ()が使用されます)、これは、将来.prop()が正規である場合に両方を変更することが維持されることを保証するものではありません。たとえば、.attr( 'checked'、false);を使用すると、使用するライブラリには.prop( 'checked'、true);が含まれますが、厄介なバグを引き起こす可能性のある固有の競合が発生します。
Kzqai 2013年

29

試す

$(this).removeAttr('checked')

多くのブラウザは 'checked = anything'をtrueとして解釈するため。これにより、checked属性が完全に削除されます。

お役に立てれば。


また、他の回答の1つが言及しているように、each関数は必要ありません。removeAttr呼び出しをセレクターにチェーンするだけです。
cjstehno 2010年

6
注:この応答は2010年からのものです。その時点では、これは有効かつ受け入れられているアプローチでした。それ以来、非推奨になりました。
cjstehno 2013

21

Igorのコードに基づくLaurynasのプラグインのわずかな変更。これは、対象となるラジオボタンに関連付けられた可能なラベルに対応します。

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

1
ラベルがどのように使用されるかによって異なります。IDを使用している場合、このコードは機能します。ラジオボタンがラベルにネストされていない場合は機能しません。これをさらに強化したバージョンを使用できます:gist.github.com/eikes/9484101
eikes

20

パトリックに感謝します、あなたは私の一日を作りました!それはあなたが使用しなければならないマウスダウンです。ただし、ラジオボタンのグループを処理できるようにコードを改善しました。

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

17

Igorのコードをプラグインとして書き換え。

使用する:

$('input[type=radio]').uncheckableRadio();

プラグイン:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

ラベルをクリックしても、選択を解除できません。したがって、ラベルをクリックしてラジオを選択することはできますが、ラジオボタン自体をクリックすることによってのみ、選択を解除できます。
SimonHürlimann2013年

@ alkos333にも、ラベルで機能するように見えるソリューションがあります。
SimonHürlimann2013年

ラベルの使用方法に依存します。IDを使用する場合は@ alkos333コードが機能し、ラジオボタンがラベルにネストされている場合は、このバージョンを使用します:gist.github.com/eikes/9484101
eikes

16

ラジオとラジオグループの場合:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

14

これを試してください、これはトリックを行います:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });


9

チェックボックスのみを使用してラジオボタンの動作をシミュレートすることもできます。

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

次に、この単純なコードを使用して機能します。

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

それは正常に動作し、各ボタンの動作をより詳細に制御できます。

あなたは自分でそれを試すことができます: http //jsfiddle.net/almircampos/n1zvrs0c/

このフォークを使用すると、コメントで要求されているすべての選択を解除できます:http : //jsfiddle.net/5ry8n4f4/


これはすばらしいことですが、すべてのチェックボックスをオフにすることはできません。
Stefan

6

次のコードをjQueryに追加するだけです。

jQuery("input:radio").removeAttr("checked");

そしてjavascriptの場合:

$("input:radio").removeAttr("checked");

foreachループ、.each()機能などを配置する必要はありません



4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

これはほぼ良いですが、[0]を逃しました

正解->> $(this)[0].checked = false;


1
または単に:this.checked = false;
eikes 2014年

4

このJQueryを使用してラジオボタンをオフにすることができます

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

1
function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

:D


-2
$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

チェックされたラジオをダブルクリックするたびに、チェックされたものがfalseに変わります

私のラジオは、id=radxxxxxxxxこのIDセレクターを使用しているため、


3
(わかりやすい)英語で答えを書いてください。
ericbn 2014

@ericbn誰かが英語を知らない場合はどうなりますか?
AlphaMale

@AlphaMale englishは、このサイトの公式言語です。
Cristik

@Cristikすべてのプログラマーが「英語」を話す国から来るわけではありません。それは彼らがこのフォーラムに投稿できないことを意味しますか?第二に、それは2年間の仲間です。教えてくれてありがとう。
AlphaMale

-2
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

正しいセレクタは次のとおりです。#frm input[type="radio"]:checked ありません#frm input[type="radio":checked]

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.