jquery - jQueryは、選択されたラジオボタンの値を取得します

Question

問題文は簡単です。ユーザーがラジオ グループからラジオ ボタンを選択したかどうかを確認する必要があります。グループ内のすべてのラジオ ボタンは同じ 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コードを手伝ってくれる人はいますか?

Answer 1

まず、同じ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内に配置し、たとえば、という名前を付けてから、radioDivセレクターを少し変更します。

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

Answer 2

$("#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
        }
    });

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

Answer 3

1. あなたのコードでは、jQuery は q12_3 という名前の入力の最初のインスタンスを探すだけで、この場合は値が 1 です。q12_3 という名前の入力が必要です:checked。

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

2. 上記のコードは、 を使用する場合と同じではないことに注意してください .is(":checked")。jQuery のis() 関数は、要素ではなくブール値 (true または false) を返します。

Answer 4

すべてのラジオを取得します。

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

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

radios.filter(":checked");

また

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

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

Answer 5

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

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

またはのみ

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

Answer 6

正常に動作する例を確認してください

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

Answer 7

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

$('#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/>

Answer 8

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

Answer 9

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

次の例では、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());
        });
    });

Answer 10

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

値セット/ div id によって変更されたアラートの jquery を処理します。

$("#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());
            });

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

Answer 11

マルチ グループ ラジオ ボタンの値を配列に変換する

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

Answer 12

私は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 の例です。

Answer 13

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