jQuery mendapatkan nilai dari tombol radio yang dipilih

Pernyataan masalah sederhana. Saya perlu melihat apakah pengguna telah memilih tombol radio dari grup radio. Setiap tombol radio dalam grup berbagi id yang sama.

Masalahnya adalah bahwa saya tidak memiliki kendali tentang bagaimana formulir dihasilkan. Berikut ini contoh kode tampilan kode kontrol tombol radio:

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

Selain itu ketika tombol radio dipilih itu tidak menambahkan atribut "diperiksa" ke kontrol hanya teks yang diperiksa (saya kira hanya properti diperiksa tanpa nilai) . Di bawah ini adalah tampilan kontrol radio yang dipilih

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

Adakah yang bisa membantu saya dengan kode jQuery yang dapat membantu saya mendapatkan nilai dari tombol radio yang diperiksa?

Gunakan saja.

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

Sangat mudah.

Pertama, Anda tidak dapat memiliki banyak elemen dengan id yang sama. Saya tahu Anda mengatakan Anda tidak dapat mengontrol bagaimana formulir dibuat, tapi ... cobalah untuk menghapus semua id dari radio, atau membuatnya unik.

Untuk mendapatkan nilai dari tombol radio yang dipilih, pilih berdasarkan nama dengan :checkedfilter.

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

EDIT

Jadi Anda tidak memiliki kendali atas nama-nama tersebut. Dalam hal ini saya akan mengatakan meletakkan semua tombol radio ini di dalam div, beri nama, katakan radioDiv,, kemudian sedikit modifikasi pemilih Anda:

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

Cara termudah untuk mendapatkan nilai tombol radio yang dipilih adalah sebagai berikut:

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

Tidak ada ruang yang harus digunakan di antara pemilih.

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

Pastikan untuk membungkus ini dalam fungsi siap DOM ( $(function(){...});atau $(document).ready(function(){...});).

1. Dalam kode Anda, jQuery hanya mencari instance pertama dari input dengan nama q12_3, yang dalam hal ini memiliki nilai 1. Anda ingin input dengan nama q12_3 :checked.

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

2. Perhatikan bahwa kode di atas tidak sama dengan menggunakan .is(":checked"). is() Fungsi jQuery mengembalikan boolean (benar atau salah) dan bukan elemen.

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

Ini akan mengembalikan, memeriksa nilai tombol radio.

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

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

untuk atribut bersarang

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

Jangan lupa kawat gigi tunggal untuk nama

Dapatkan semua radio:

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

Saring untuk mendapatkan yang diperiksa

radios.filter(":checked");

ATAU

Cara lain Anda dapat menemukan nilai tombol radio

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

Untuk mendapatkan nilai dari Tombol Radio yang dipilih, Gunakan RadioButtonName dan Form Id yang berisi RadioButton.

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

ATAU hanya dengan

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

Periksa contoh itu berfungsi dengan baik

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

Lihat di bawah untuk contoh kerja dengan kumpulan grup radio yang masing-masing terkait dengan bagian yang berbeda. Skema penamaan Anda penting, tetapi idealnya Anda harus mencoba dan menggunakan skema penamaan yang konsisten untuk input (terutama ketika mereka berada di bagian seperti di sini).

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

Gunakan Kode Di Bawah Ini

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

Harap perhatikan, atribut nilai harus didefinisikan sehingga bisa mendapatkan "Pria" atau "Wanita" di hasil Anda.

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

Coba ini dengan contoh

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

Hanya dengan Nama

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

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

Anda bisa mendapatkan nilai tombol radio yang dipilih oleh Id menggunakan ini di javascript / jQuery.

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

Saya harap ini akan membantu.

Cara terbaik untuk menjelaskan topik sederhana ini adalah dengan memberikan contoh dan tautan referensi sederhana: -

Dalam contoh berikut ini kami memiliki dua tombol radio. Jika pengguna memilih salah satu tombol radio, kami akan menampilkan nilai tombol radio yang dipilih di kotak peringatan.

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

Saya tahu bahwa saya bergabung selarut ini. Tetapi perlu disebutkan bahwa itu perlu

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

Dan kemudian saya memeriksa ini di js saya. Bisa seperti itu

$(document).ready(function () { 

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

`

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

dan menangani jquery untuk peringatan seperti untuk set nilai / Diubah melalui id 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());
            });

sangat mudah ....: -}

Cara mudah lain untuk memahami ... Ini Berhasil:

Kode 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

Kode Jquery:

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

tombol radio multi grup nilai rahasia untuk array

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

Saya bukan orang javascript, tapi saya temukan di sini untuk mencari masalah ini. Untuk siapa yang mencari dan menemukannya di sini, saya berharap ini bisa membantu. Jadi, seperti yang dimaksud jika kita memiliki daftar tombol radio:

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

Saya dapat menemukan yang dipilih dengan pemilih ini:

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

Bahkan jika tidak ada elemen yang dipilih, saya masih tidak mendapatkan kesalahan yang tidak terdefinisi. Jadi, Anda tidak perlu menulis pernyataan if tambahan sebelum mengambil nilai elemen.

Berikut adalah contoh jsfiddle yang sangat mendasar .

Berikut adalah 2 tombol radio yaitu rd1 dan Radio1

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

Cara paling sederhana untuk memeriksa tombol radio mana yang dicentang, dengan memeriksa individu adalah properti (": dicentang")

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

Bahkan inputtidak perlu seperti yang disarankan oleh jawaban lain. Kode berikut juga dapat digunakan:

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

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

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

Jika Anda tidak tahu nama sepcific atau ingin memeriksa semua input radio dalam suatu formulir, Anda dapat menggunakan var global untuk memeriksa setiap grup radio nilainya hanya sekali: `

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