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(){});

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

これはそれを行うべきです、これはすべてこれに非常に似た例があるドキュメントにあります：

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

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

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

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

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

更新：投稿後、DOMトラバーサルの使用が1つ少ないため、上記のPaoloの回答の方が良いと判断しました。この回答は、選択された要素をブラウザー間で互換性のある方法で取得する方法を示しているので、この回答はそのままにしておきます。

$('input:radio[name=theme]:checked').val();

別の方法

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

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

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

次のコードを使用して、選択したラジオボタンの値を名前で取得します。

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

おかげでアドナン

この質問は、jQueryの1.7.2から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に変更し、この変更のためのチケットの特定などに理由を理解：ラジオセレクタページ追加情報セクションの下。

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

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

jsfiddle

現在の回答のパフォーマンス概要については、こちらを確認してください

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

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

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

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

ここにフィドルのURLがあります

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

<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>

true / false値が必要な場合は、これを使用します。

  $("input:radio[name=theme]").is(":checked")

このような何か？

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

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

同じページにラジオボタンのグループが複数ある場合、これを試してラジオボタンの値を取得することもできます。

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

乾杯！

CSSクラスを使用してラジオボタンの範囲を定義し、次を使用して値を決定することもできます

$('.radio_check:checked').val()

これでうまくいきました。

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"）。each（function（）{
        if（$（this）.is（ '：checked'））
        alert（$（this）.val（））;
    }）;

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

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

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

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

<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あなたのために次のHTMLをレンダリングしますRadioButton

<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を（コンテナ名、フォーム名、ユーザーコントロールの名前の変更は、...）あなたは上記のコードで見ることができるように。

RadioButtonjQueryを使用して値を取得するための残りの実行可能な唯一の方法は、次のようにまったく関係のない質問に対するこの回答で述べたcssクラスを使用することです

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});