jQueryを介してどのラジオボタンが選択されているかを知るにはどうすればよいですか?


2707

2つのラジオボタンがあり、選択したものの値を投稿したいと思います。jQueryで値を取得するにはどうすればよいですか?

私はそれらすべてをこのように得ることができます:

$("form :radio")

どれが選択されているかを知るにはどうすればよいですか?

回答:


3936

idを持つフォームの選択された radioNameアイテムの値を取得するにはmyForm

$('input[name=radioName]:checked', '#myForm').val()

次に例を示します。

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>


306
私はこれを使用してしまいました:$( 'form input [type = radio]:checked')
juan

46
@PeterJ:単純に2つの引数を使用するのはなぜ'#myform input[name=radioName]:checked'ですか?
ソフィーアルパート2011

145
jQueryは、スコープが正しく設定されている場合に最高のパフォーマンスを発揮し、IDによる選択は常に最もパフォーマンスの高いセレクターです。2つの引数を使用する方法は、これを実行する別の方法にすぎません。
Peter J

40
最高のパフォーマンスを得るために、ドキュメントでは:radioセレクターを使用しないことをお勧めします。api.jquery.com/radio-selector
Peter J

2
代替:$( '。className:checked');
Meetai.com 2012年

410

これを使って..

$("#myform input[type='radio']:checked").val();

64
フォームにラジオボタンのセットが複数ある場合、これは最初のセットの値のみを取得すると思います。
ブラッド

3
これは、フォームでチェックされている最初のラジオボタンの値のみを返します。これは、Peter Jが提案した方法で行う必要があります。
MickJ 2013年

3
@MickJこのコードは、Peter Jのコードと同じです...元の質問のユースケースを考慮してください。ただし、ラジオボタンのさまざまなグループがある場合は機能しません。そのため、[name = selector]を使用するほうがずっと良い
Lyth

1
@Bradが述べたように、これは最初のセットの値のみを取得します。「.val()」を「.map(function(){return this.value;})。get();」に置き換えます。
am_ 2013年

1
:それは純粋なパフォーマンスのためではなく(いや、私は必要と何とか何とか前に最適化する知っている)、価値がこの作品速く、特に古いブラウザではあるもののために$("#myform").find("input[type='radio']:checked").val();
マーク・庄屋

307

たとえば、ラジオボタングループへの参照がすでにある場合は、次のようになります。

var myRadio = $("input[name=myRadio]");

filter()関数ではなくを使用してくださいfind()。(find()は、子/子孫要素を見つけるためのものですfilter()が、選択範囲の最上位要素を検索します。)

var checkedValue = myRadio.filter(":checked").val();

注:この回答は当初find()、を使用することを推奨した別の回答を修正していたため、変更されたようです。find()すでにコンテナ要素への参照があったが、ラジオボタンへの参照がなかった場合にも役立ちます。例:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

7
わかりやすくするために、find()が実際にすべての子孫要素(指定されたセレクターに一致する)を検索することを追加したかっただけです。直接の子だけが必要な場合は、children()を使用します。
Matt Browne

139

これはうまくいくはずです:

$("input[name='radioName']:checked").val()

Peter Jのソリューションのように、入力の周りで使用されている「」はチェック済みであり、「」ではないことに注意してください。


これが選択された答えです。名前は、ラジオボタンを追跡するために非常に良い方法です
quemeful

79

:checkedセレクターをラジオセレクターと一緒に使用できます。

 $("form:radio:checked").val();

13
これは見栄えがいいですが、jQueryのドキュメントでは、パフォーマンスを向上させるために:radioではなく[type = radio]を使用することを推奨しています。これは、読みやすさとパフォーマンスの間のトレードオフです。私は通常、そのような些細な問題については、パフォーマンスよりも読みやすさを重視していますが、この場合は、[type = radio]の方がより明確だと思います。したがって、この場合は$( "form input [type = radio]:checked")。val()のようになります。まだ有効な答えです。
なし

57

ブール値だけが必要な場合、つまり、チェックされているかどうか、これを試してください:

$("#Myradio").is(":checked")

53

すべてのラジオを入手:

var radios = jQuery("input[type='radio']");

チェックされたものを取得するためのフィルター

radios.filter(":checked")



25

これが、フォームを作成して、チェックされたラジオの取得を処理する方法です。

myFormというフォームを使用する:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

フォームから値を取得します。

$('#myForm .radio1:checked').val();

フォームを投稿しない場合は、次のようにしてさらに簡略化します。

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

次に、チェックされた値を取得します:

    $('.radio1:checked').val();

入力にクラス名を付けると、入力を簡単にスタイル設定できます...


24

私の場合、1つのフォームに2つのラジオボタンがあり、各ボタンのステータスを知りたいと思っていました。これは私のために働きました:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>


1
各ボタンのステータスはどういう意味ですか?同じ名前のラジオボタンでは、1つだけをチェックできます。そのため、チェックされたものを取得した場合、残りはチェックされません。
2014年

17

ではJSF(使用して生成されたラジオボタン<h:selectOneRadio>タグ)を、あなたはこれを行うことができます。

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

selectOneRadio IDがどこにあるradiobutton_idとフォームIDがされform_id

jQueryはこの属性を使用するため、示されているように、idではなくnameを必ず使用してください(名前は、JSFに似たコントロールIDによって自動的に生成されます)。


15

また、ユーザーが何も選択していないか確認してください。

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

15

ラジオボタンの値を設定および取得するためのjQueryプラグインを作成しました。また、それらの「変更」イベントも尊重します。

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

アドインを有効にするコードをどこかに配置します。その後お楽しみください!何も壊すことなく、デフォルトのval関数をオーバーライドするだけです。

このjsFiddleにアクセスして実際に試してみて、動作を確認してください。

フィドル


14

単一のフォームに複数のラジオボタンがある場合

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

これは私のために働いています。



12

これはうまくいきます

$('input[type="radio"][class="className"]:checked').val()

作業デモ

:checkedセレクタはのために働くcheckboxesradio buttonsと要素を選択します。選択要素の場合のみ、:selectedセレクターを使用します。

のAPI :checked Selector



10

この簡単なスクリプトを使用します

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

すべてのブラウザで機能させたい場合は、変更イベントではなくクリックイベントを使用してください
Matt Browne


8

デモhttps : //jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>



5

これを支援するライブラリをリリースしました。実際にはすべての可能な入力値を取得しますが、チェックされたラジオボタンも含まれます。https://github.com/mazondo/formalizedataで確認できます。

それはあなたに答えのjsオブジェクトを与えるので、次のような形になります:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

あなたに与えるでしょう:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

4

JavaScript配列のすべてのラジオボタン値を取得するには、次のjQueryコードを使用します。

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

2
ラジオボタンはチェックボックスとは異なります。この例ではチェックボックスを使用しています。
Matt Browne、2015年

4

それを試してみてください-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

4

フォームのすべてのラジオボタンとチェックされた値を取得するためのjQuery。

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

3

それを取得する別の方法:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>


2
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

1

この質問から、それぞれのレーベルのイベントinput内にいるときに、現在選択されているものにアクセスする別の方法を思いつきましたclick。その理由は、新しく選択されたものinputがそのlabelクリックイベントの後まで更新されないためです。

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});


1

私がする必要があったのは、C#コードを単純化することです。つまり、フロントエンドJavaScriptで可能な限り多くのことを行います。私はDNNで作業していて、独自のフォームを持っているため、フィールドセットコンテナーを使用しています。そのため、フォームを追加できません。

3つのうちどのテキストボックスが使用されているかをテストする必要があります。使用されている場合、検索の種類は何ですか?値から始まり、値を含み、値の完全一致。

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

そして私のJavaScriptは:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

IDが含まれているタグを言うだけで使用できます。DNNersにとって、これは知っておくと役に立ちます。ここでの最終目標は、SQL Serverでパーツ検索を開始するために必要なものを中間レベルのコードに渡すことです。

これにより、以前のC#コードよりもはるかに複雑なコードをコピーする必要がなくなります。重労働はここで行われています。

私はこれを少し見て、それを機能させるためにいじくり回さなければなりませんでした。したがって、他のDNNerにとって、これが簡単に見つけられることを願っています。

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