ラジオグループから選択したラジオに値を設定します


153

なぜ私はこれに苦労していますか?

値があります:5

グループ「mygroup」のラジオボタンを5の値で確認するにはどうすればよいですか?

$("input[name=mygroup]").val(5); // doesn't work?

回答:


351

助けを借りて属性セレクタあなたは、対応する値を持つ入力要素を選択することができます。次に、以下を使用して属性を明示的に設定する必要があります.attr

var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');

jQuery 1.6以降.propでは、ブール値を使用してメソッドを使用することもできます(これが推奨されるメソッドです)。

$("input[name=mygroup][value=" + value + "]").prop('checked', true);

まず、1つのラジオボタングループの下にあるラジオボタンからチェックされた属性を削除する必要があることを思い出してください。そうすると、そのラジオボタングループのラジオボタンの1つにチェックされたプロパティ/属性を追加できます。

1つのラジオボタングループのすべてのラジオボタンからチェックされた属性を削除するコード-

$('[name="radioSelectionName"]').removeAttr('checked');

.prop( 'checked'、true)はおそらくより良いか.is()
bladefist

3
@bladefist:.isここでは役に立ちませんが、私は同意し.propます。それは当時利用できませんでした;)私の答えを更新します。ありがとう!
Felix Kling 2013年

4
ラジオボタンの値に小数がある場合は、値を引用符で囲む必要があります
Robert

1
@ロバート:うん、たぶん。ドキュメントから:「引用符で囲まれていない単一の単語または引用符で囲まれた文字列のいずれかになります。」
Felix Kling 2013年

5
ジョナサンの答えを見てください。jQueryのドキュメントは、.val()ラジオまたはチェックボックスグループでの値の設定をサポートすることを示しています。この回答の方法は技術的には機能しますが、迂回的であり、読みにくく、覚えられません。
jinglesthula

144

ラジオとチェックボックスをチェックするより良い方法があります。生の値の代わりに値の配列を valメソッドに渡す必要があります

注:値のみを(配列内に含まずに)単に渡すと、「mygroup」のすべての値がその値に設定されます。

$("input[name=mygroup]").val([5]);

これがどのように機能するかを説明するjQueryのドキュメントは次のとおりです。http//api.jquery.com/val/#val-value

そして .val([...])また、フォームのような要素で動作し<input type="checkbox"><input type="radio">、と<option>のsの内部<select>

配列の要素の1つと一致する値を持つ入力とオプションがチェックまたは選択され、配列の要素の1つと一致しない値を持つ入力はチェック解除または選択解除されます

この動作を示すフィドル:https : //jsfiddle.net/92nekvp3/


受け入れられた答え(まあ、そうでなければなりません)。jQuery 1.0以降、ドキュメントの最後の例を参照(下にスクロール):api.jquery.com/valここにコピー:jsfiddle.net/JoePC/w1f9ykso
JoePC

これは、すべての入力値を設定するための優れた一貫した方法です。それについて学ぶのに6年かかりました。
ジェフローリー2018

1
グループ内のすべての値が、値をチェックするのではなく、渡された値に設定される理由を理解するためにかなりの時間を費やしました。配列内ではなく、値を単独で渡したことがわかりました。
OXiGEN


8
$("input[name='mygroup'][value='5']").attr("checked", true);

7

上記のように属性値を変更すると、changeイベントはトリガーされないため、何らかの理由で必要な場合は、そのようにトリガーできます

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');


1

または、それにvalue属性を書き込むだけです。

$(':radio[value=<yourvalue>]').attr('checked',true);

これでうまくいきます。


0
var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}

4
あなたのコードがあなたの答えで何をしているのか説明していただけますか?少なくとも文かそこら。そして、それがソリューションをどのように解決するか。ありがとうございました。
アレックス

0

純粋なJavaScriptバージョン:

document.querySelector('input[name="myradio"][value="5"]').checked = true;

-1
$('input[name="mygroup"]').val([5])

1
あなたのソリューションが、すでに提供されている他のソリューションと何が違うのかを説明できますか?
Giovani Vercauteren

@Giovani Vercauteren、名前を文字列として指定する必要があります。そのため、コードではmygroupを文字列として指定しています。
Anjitha、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.