web-dev-qa-db-ja.com

何もチェックされないようにjQueryのラジオボタンをリセットする方法

次のようなHTMLのラジオボタンがあります。

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

これはフォームタグ内にあり、ユーザーがフォームを送信するときに、すべてのラジオボタンをデフォルトに戻します。意味はチェックされていません。

このコードはありますが、[0] is null or not an objectというエラーが発生します

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

IE 6.でこれを行っています。

jqueryhtml-form
129
roy

1.6を使用する前のjQueryのバージョンでは：

$('input[name="correctAnswer"]').attr('checked', false);

1.6以降のjQueryのバージョンでは、次を使用する必要があります。

$('input[name="correctAnswer"]').prop('checked', false);

ただし、1.6.1以降を使用している場合は、最初の形式を使用できます（下記の注2を参照）。

注1：2番目の引数はfalseではなく "false" "false"は偽の値ではないため。つまり.

if ("false") {
    alert("Truthy value. You will see an alert");
}

注2：jQuery 1.6.0以降、2つの類似したメソッド.attrと.propがあり、2つの関連するがわずかに異なることを行います。この特定の場合、1.6.1 +を使用すると、上記のアドバイスが機能します。上記は1.6.0では機能しません。1.6.0を使用している場合は、アップグレードする必要があります。詳細が必要な場合は、読み続けてください。

詳細：ストレートHTML DOM要素を操作する場合、DOM要素に関連付けられたプロパティ（checked、type、valueなど）がインターフェースを提供します。 HTMLページの実行状態。 HTMLで提供されるHTML属性値へのアクセスを提供する.getAttribute/.setAttributeインターフェイスもあります。 1.6より前では、jQueryは、.attrという1つのメソッドを提供して、両方のタイプの値にアクセスすることで区別を曖昧にしました。 jQuery 1.6+は、これらの状況を区別するために、.attrと.propの2つのメソッドを提供します。

.propを使用するとDOM要素にプロパティを設定でき、.attrを使用するとHTML属性値を設定できます。プレーンDOMで作業しており、チェック済みプロパティelem.checkedをtrueまたはfalseに設定している場合、実行中の値（ユーザーに表示される値）を変更し、返される値はページ上の状態を追跡します。ただし、elem.getAttribute('checked')は初期状態のみを返します（HTMLの初期状態に応じて'checked'またはundefinedを返します）。 1.6.1+では、.attr('checked', false)を使用すると、elem.removeAttribute('checked')とelem.checked = falseの両方が実行されます。これは、変更により多くの後方互換性の問題が発生し、HTML属性またはDOMプロパティを設定する必要があるかどうかがわからないためです。詳細については、 。propのドキュメント を参照してください。

256
lambacck

Jqueryでラジオボタンの状態を設定する最良の方法：

HTML：

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

1つのボタンを事前選択するJquery（1.4+）コード：

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

Jquery 1.6+コードでは、.prop（）メソッドが推奨されます：

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

ボタンの選択を解除するには：

$("[name=color]").removeAttr("checked");
52
Benjk

問題は、属性セレクターが@で始まっていないことです。

これを試して：

$('input[name="correctAnswer"]').attr('checked', false);
10
bdukes

最後に、多くのテストの後、最も便利で効率的なプリセット方法は次のとおりです。

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

JQueryUIオブジェクトでは更新が必要です。

値の取得は簡単です：

alert($('input[name=correctAnswer]:checked').val())

JQuery 1.6.1、JQuery UI 1.8でテスト済み。

4
vv-reflex
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');
4
Waqas Ali Khan Puar

私はこれが古いこと、そしてこれが少し話題から外れていることを知っていますが、コレクション内の特定のラジオボタンのみをチェック解除したいと仮定すると：

$("#go").click(function(){
    $("input[name='correctAnswer']").each(function(){
      if($(this).val() !== "1"){
        $(this).prop("checked",false);
      }
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

ラジオボタンリストを扱っている場合は、：checkedセレクターを使用して、必要なセレクターのみを取得できます。

$("#go").click(function(){
  $("input[name='correctAnswer']:checked").prop("checked",false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">
2
Nielsvh

Propはチェックされたステータスを変更しましたが、フォームでもそれを表示します。

$('input[name="correctAnswer"]').prop('checked', false).change();
0
Adeel

Jqueryでチェックされるラジオボタンセット：

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

jqueryコード：

$('div#somediv input:radio:nth(0)').attr("checked","checked");
0
sonali

DOMのすべてのラジオボタンをクリアする場合：

$('input[type=radio]').prop('checked',false);

0
elzaer
<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');
0
Lakshmana Kumar D