jQueryは選択したラジオボタンの値を取得します


557

問題の説明は簡単です。ユーザーがラジオグループからラジオボタンを選択したかどうかを確認する必要があります。グループ内のすべてのラジオボタンは同じIDを共有します。

問題は、フォームの生成方法を制御できないことです。以下は、ラジオボタンコントロールコードがどのように見えるかのサンプルコードです。

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

ラジオボタンが選択されたときにこれに加えて、それはコントロールに属性を「確認」だけでテキストが追加されることはありません確認を (私はプロパティに値なしで確認推測します)。選択したラジオコントロールは次のようになります

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

チェックされたラジオボタンの値を取得するのに役立つjQueryコードで誰かが私を助けることができますか?


71
同じIDを持つ複数の要素がありますか?それはひどい。
マットボール


同じIDを持つすべてのユーザーとどのように連携しますか?IDで評価する場合、最初に一致した要素で評価が停止しませんか?ここでの目的は何ですか?それらは異なる時間に表示される動的要素ですか?
Mark Carpenter Jr

1
参考までに、ASP.NET MVCの@ Html.RadioButtonForヘルパーは、同じIDを持つすべてのラジオボタンを生成します。おっとっと。
Triynko 2018年

回答:


1120

ただ使う。

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

とても簡単です。


25
引用符を忘れないでください:$( "input [name = '" + fieldName + "']:checked")。val();
Atara

4
@Guraprasad Rao:適切なコードです-この場合、引用符は必要ありません。試してみてください。
Stefan

2
これが、HTMLで指定した値ではなく「オン」を返すのはなぜですか?編集:自分の値を引用符で囲んでいなかったため。
Vincent

3
$( 'input [name = "name_of_your_radiobutton"]:checked')。val();
Sameera Prasad Jayasinghe 2017年

1
ボタンが選択されていない場合、これは単にを返すnullことに注意してください。これは論理的ですが"".val()呼び出しを介してデフォルト値として表示することに慣れている場合、混乱することがあります。
xji 2018年

313

まず、同じIDを持つ要素を複数持つことはできません。フォームの作成方法を制御することはできないとおっしゃっていましたが、どういうわけか、無線機からすべてのIDを削除するか、ラジオを一意にするようにしてください。

選択したラジオボタンの値を取得するには、名前を:checkedフィルターで選択します。

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

編集

したがって、名前を制御することはできません。その場合は、これらのラジオボタンをすべてdivという名前のdiv内に配置し、radioDivセレクターを少し変更します。

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

75

選択したラジオボタンの値を取得する最も簡単な方法は次のとおりです。

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

セレクターの間にスペースを使用しないでください。


最も簡単なオプションはこれです。
andreszs

44
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

これを必ずDOM対応関数($(function(){...});または$(document).ready(function(){...});)でラップしてください。


私はこのコードで常に空白の値を取得しています。これは、テキストがチェックされただけで値がチェックされたプロパティがないためだと思います(プロパティと見なせるかどうかわかりません)
user1114212

IDでラジオボタンを選択していますか?radioIDIDに変更しましたか?
Purag

37
  1. コードでは、jQueryはq12_3という名前の入力の最初のインスタンスを検索します。この場合、値は1です。q12_3という名前の入力が必要です:checked
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. 上記のコードはの使用と同じではないことに注意してください .is(":checked")。jQueryのis() 関数は、要素ではなくブール値(trueまたはfalse)を返します。

28
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

これは、チェックされたラジオボタンの値を返します。

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

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

ネストされた属性

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

名前の単一のブレースを忘れないでください


20

すべてのラジオを入手:

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

チェックされているものを取得するためにフィルタリングします

radios.filter(":checked");

または

ラジオボタンの値を見つける別の方法

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

3
私は$('[name=your_inputs_names]:checked').val()それらが常に同じ一意の名前を持っている原因を使用します
vladkras

4
活用例.filter()
Mark Carpenter Jr

2
あれ.filter()。私はこの答えがトップであることを望みます。
Yusril Maulidan Raji

16

選択されたラジオボタンの値を取得するには、RadioButtonNameとRadioButtonを含むフォームIDを使用します。

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

またはのみ

$('form input[type=radio]:checked').val();

12

それがうまくいく例を確認してください

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();


12

それぞれが異なるセクションに関連付けられているラジオグループのコレクションを使用した作業例については、以下を参照してください。命名スキームは重要ですが、理想的には、とにかく入力に対して一貫した命名スキームを使用してください(特に、これらがこのようなセクションにある場合)。

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>


12

以下のコードを使用

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

結果で「男性」または「女性」を取得できるように、値属性を定義する必要があることに注意してください。

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

7

例でこれを試してください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

7

名前のみ

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

1
undefined値が確実でなければならないことがわかっているのに、なぜ文字列比較を行うのが面倒なのcheckedですか?jQueryでは必要ありません。
Devin Burke

質問では、最初から1つのラジオボタンがチェックされることを示唆する情報が表示されません。つまり、ほとんどの場合、ラジオボタンを使用しているようなものです。したがって、それをチェックする必要があり、何も選択されていない場合、attr( "checked")はnullオブジェクトを返します。
Tadej Magajna

そうですが、nullを返すだけではエラーが発生しないので、との比較"undefined"は不要です。
Devin Burke

5

選択したラジオボタンの値は、j​​avascript / jQueryでこれを使用してIdで取得できます。

$("#InvCopyRadio:checked").val();

これがお役に立てば幸いです。


非常に効率的です!
MHJ

4

この単純なトピックを説明する最良の方法は、単純な例と参照リンクを提供することです:-

次の例では、2つのラジオボタンがあります。ユーザーがラジオボタンを選択すると、選択したラジオボタンの値がアラートボックスに表示されます。

HTML:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery:-

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

4

私はこの遅くに参加していることを知っています。しかし、それはかかることを言及する価値があります

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

そして、私はこれを私のjsでチェックしました。それは

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`


3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

値セットのようにアラートのjqueryを処理する/ div idによって変更:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

とても簡単です...:-}


親IDを使用してこれを行うより簡単な方法は、次のようになります。...$( "#subscriptions")。on( "change"、function(){var selection = $(this).find( "input:checked") .val(); alert(selection);});
MistyDawn

3

理解する別の簡単な方法...それは働いています:

HTMLコード:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jqueryコード:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

3

配列へのマルチグループラジオボタンの隠れた値

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6


より多くの人が理解できるように、説明を追加してください。
Shanteshwar Inde

2

私はJavaScriptの人ではありませんが、この問題を検索するためにここで見つけました。グーグルで見つけてここにいる人のために、これがいくつかの助けになることを願っています。したがって、問題のように、ラジオボタンのリストがある場合は、次のようになります。

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

このセレクターで選択されたものを見つけることができます:

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

要素が選択されていなくても、未定義のエラーは発生しません。したがって、要素の値を取得する前に、追加のifステートメントを記述する必要はありません。

これは非常に基本的なjsfiddleの例です。


1
これは、無線入力の名前属性の誤った使用です。グループ内の単一の値のみを許可する場合は、グループ内のラジオボタンに同じ名前を付ける必要があります。このようにすると、チェックボックスのように機能し、グループ内の単一の選択ではなく複数の選択が可能になります。
MistyDawn

@MistyDawn正解です。私がこれをどのように書いたか覚えていません。おそらくバグの修正によるものでしょう。
Yusuf Uzun

2

2つのラジオボタン、つまりrd1とRadio1があります。

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

個々のis( ":checked")プロパティをチェックして、どのラジオボタンがチェックされているかをチェックする最も簡単な方法

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

これは非常に堅牢なソリューションではありません。含まれているdivを用意し、その下のすべての無線を確認して、オンになっているものを選択することをお勧めします。特定の名前のすべてのラジオを見て、チェックされているラジオを見つけることもできます。これにより、ボタンが追加されるたびにコードを変更する必要がなくなります。
Richard Duerr、2016年

ページに2つ以上の無線入力がある場合、これは非常に混乱し、すべての無線にIDを割り当てるのは非常に時間がかかります。この方法は通常、良い方法とは見なされません。
MistyDawn

2

でも、input他の回答により示唆されるように必要はありません。次のコードも使用できます。

var variable_name = $("[name='radio_name']:checked").val();

これは基本的に5年前のこの回答と同じですが、input引用符がなく、不要な引用符があります。
異端者の猿

これらの引用は不要ではなく、上記の回答を投稿した理由は、入力が不要であることを人々に知らせるためです
shivamag00

次に、「次のコードを使用する」コマンドを使用するのではなく、質問を編集してそれらの理由を説明することを検討してください。あなたは引用符が必要であると述べているソースを参照したいと思うかもしれません。
異端者の猿、

@HereticMonkey編集が完了しました...ありがとう:)
shivamag00

1
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`

1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

1

特定の名前がわからない場合や、フォーム内のすべての無線入力を確認する場合は、グローバル変数を使用して、各無線グループの値を1回だけ確認できます。`

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.