web-dev-qa-db-ja.com

JQueryでは、どのように私はそのname属性によって要素を選択するのですか？

私のWebページには、以下のように3つのラジオボタンがあります。

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

JQueryでは、これら3つのいずれかがクリックされたときに選択されたラジオボタンの値を取得したいです。 jQueryにはid（＃）セレクタとclass（。）セレクタがありますが、以下のようにラジオボタンをその名前で見つけたい場合はどうしますか？

$("<radiobutton name attribute>").click(function(){});

この問題を解決する方法を教えてください。

javascriptjqueryhtmlradio-button
325
Prashant

これはそれをするべきです、これのすべてはこれに非常に類似した例がある ドキュメンテーション にあります：

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

また、そのスニペットには複数の同一のIDがあります。これは無効なHTMLです。クラスは一意である必要があるため、IDではなく要素のセットをグループ化するために使用します。

333
Paolo Bergantino

どのラジオボタンがチェックされているか確認するには、これを試してください：

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

イベントはグループ内のすべてのラジオボタンでキャッチされ、選択されたボタンの値はvalに配置されます。

更新：投稿後、私は上記のPaoloの答えが1つ少ないDOMトラバーサルを使用するので、より良いと判断しました。クロスブラウザ互換の方法で選択された要素を取得する方法を示しているので、私はこの答えを立たせます。

184
jeff.mitchel
$('input:radio[name=theme]:checked').val();
155
Jay

別の方法

$('input:radio[name=theme]').filter(":checked").val()
39
h0mayun

これは私にとって素晴らしい仕事です。たとえば、同じ「名前」を持つ2つのラジオボタンがあり、チェックしたものの値を取得したいだけでした。あなたはこれを試すことができます。

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
20
wdonayredroid

次のコードは、選択したラジオボタンの値を名前で取得するために使用されています

jQuery("input:radio[name=theme]:checked").val();

ありがとうアドナン

14
Muhammad Adnan

1.7.2のjQueryから1.8.2にアップグレードした後にエラーを調査していたので、この質問を見つけました。 jQuery 1.8以降に変更が加えられたため、この質問への回答方法が変更されています。

jQuery 1.8では廃止予定 ：：radio、：checkbox、：textのような擬似セレクタ。

上記を行うには、:radioを[type=radio]に置き換えるだけです。

だからあなたの答えは今jQuery 1.8以上のすべてのバージョンのためになります：

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
});

1.8 readmeへの変更 と この変更に固有のチケット について、そして追加の下の ：ラジオセレクタページ についての理由を理解することができます。情報セクション.

13
klabranche

本当に簡単なことをするためにライブラリを含めたくない人のために：

document.querySelector('[name="theme"]:checked').value;

jsfiddle

現在の回答の掲載結果の概要については ここで確認してください

12
A1rPun

クリックイベントの前にデフォルトで選択されているラジオボタンの値を知りたい場合は、次の手順を試してください。

alert（$（ "input：radio：checked"）。val（））;
9
lhoess

以下のように、ページに複数の無線グループがある場合は、フィルタ機能を使用できます。

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

これはフィドルのURLです

http://jsfiddle.net/h6ye7/67/

6
Muhammad Salman

True/falseの値が必要な場合は、これを使用してください。

  $("input:radio[name=theme]").is(":checked")
4
gls123
<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>
4
kartheek

このような何か？

$("input:radio[name=theme]").click(function() { 
 ...
});

ラジオボタンをクリックすると、選択された状態になると思いますので、選択されているラジオボタンに対してこのボタンが呼び出されることになります。

3
tschaible

私はあなたがラジオボタンの値を得るためにこれを試すことができる同じページにラジオボタンの複数のグループを持っています：

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

乾杯！

3
ahmed

cSSクラスを使用してラジオボタンの範囲を定義してから、以下を使用して値を決定することもできます。

$('.radio_check:checked').val()
2
Daniel Fernandes

これは私のために働きました..

HTML： 

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery： 

 
 $（ "。radioClass"）。それぞれ（function（）{
 if（$（this）.is（ '：checked'）） （$（this）.val（））; 
}）;

それが役に立てば幸い..

1
Ravi M

ASP.NET RadioButtonコントロールの値を取得するためにクラスセレクタを使用することは常に空であり、これがその理由です。

以下のようにASP.NETにRadioButtonコントロールを作成します。

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

そしてASP.NETはあなたのRadioButtonのために次のHTMLをレンダリングします

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

ASP.NETにはRadioButtonコントロール名やidを使いたくありません。なぜなら、上のコードで見られるように、それらは何らかの理由でユーザーの手から変更される可能性があるからです（コンテナ名、フォーム名、ユーザーコントロール名の変更）。

JQueryを使用してRadioButtonの値を取得するための唯一の残りの実行可能な方法は、 これ /で説明されているようにcssクラスを使用することです。

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
0
AaA
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
0
Ankur