jQuery mendapatkan nilai dari tombol radio yang dipilih


557

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?


71
Anda punya banyak elemen dengan ID yang sama? Itu buruk.
Matt Ball


Bagaimana cara kerjanya dengan mereka semua memiliki ID yang sama? Ketika mengevaluasi dengan ID, apakah evaluasi tidak berhenti pada elemen yang cocok pertama? Apa tujuannya di sini apakah mereka elemen dinamis yang ditampilkan pada waktu yang berbeda?
Mark Carpenter Jr

1
FYI, ASP.NET MVC's @ Html.RadioButtonFor helper akan menghasilkan semua tombol radio dengan id yang sama. oops.
Triynko

Jawaban:


1120

Gunakan saja.

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

Sangat mudah.


25
Jangan lupa tanda kutip: $ ("input [nama = '" + fieldName + "']: dicentang"). Val ();
Atara

4
@Guraprasad Rao: Ini adalah kode yang tepat - tanda kutip tidak diperlukan dalam kasus ini. Cobalah dan lihatlah.
Stefan

2
Mengapa ini mengembalikan "pada" daripada nilai yang saya tentukan dalam HTML? EDIT: Karena saya tidak memiliki tanda kutip di sekitar nilai saya.
Vincent

3
$ ('input [name = "name_of_your_radiobutton"]: dicentang'). val ();
Sameera Prasad Jayasinghe

1
Perhatikan bahwa jika tidak ada tombol yang dipilih, ini hanya akan kembali null, yang logis tetapi kadang-kadang dapat membingungkan Anda ketika Anda terbiasa melihat ""sebagai nilai default melalui .val()panggilan.
xji

313

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

75

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.


Opsi paling mudah, ini.
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
        }
    });

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


Saya selalu mendapatkan nilai kosong dengan kode ini .. Saya kira ini karena fakta bahwa saya tidak memiliki properti dengan nilai diperiksa hanya teks yang diperiksa (Saya tidak yakin apakah kami dapat menganggapnya sebagai properti)
user1114212

Apakah Anda memilih tombol radio dengan ID-nya? Apakah Anda mengubah radioIDID-nya?
Purag

37
  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());
    });
});
  1. Perhatikan bahwa kode di atas tidak sama dengan menggunakan .is(":checked"). is() Fungsi jQuery mengembalikan boolean (benar atau salah) dan bukan elemen.

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

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

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

untuk atribut bersarang

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

Jangan lupa kawat gigi tunggal untuk nama


20

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

3
Saya menggunakan $('[name=your_inputs_names]:checked').val()sebab mereka selalu memiliki nama unik yang sama
vladkras

4
Baik digunakan.filter()
Mark Carpenter Jr

2
Itu .filter(). Saya berharap jawaban ini bisa di atas.
Yusril Maulidan Raji

16

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

12

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


12

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


12

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>

7

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>

7

Hanya dengan Nama

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

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

1
Mengapa repot-repot melakukan perbandingan string undefinedketika Anda tahu pasti nilainya checked? Tidak perlu di jQuery.
Devin Burke

Dalam pertanyaan saya tidak melihat info yang menunjukkan bahwa satu tombol radio akan diperiksa dari awal. Maksud saya seperti itu dalam kebanyakan kasus dengan tombol radio. Jadi dalam kasus ketika kita harus memeriksa itu dan tidak ada yang dipilih, attr ("dicentang") akan mengembalikan objek nol.
Tadej Magajna

Benar, tapi maksud saya mengembalikan null tidak akan menyebabkan kesalahan sehingga perbandingannya "undefined"tidak perlu.
Devin Burke

5

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

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

Saya harap ini akan membantu.


sangat efisien !!
MHJ

4

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

4

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

`


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>

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 yang lebih sederhana untuk melakukan ini menggunakan id induk adalah .... $ ("# berlangganan"). On ("ubah", function () {var selection = $ (this) .find ("input: checked") .val (); lansiran (seleksi);});
MistyDawn

3

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

3

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


dapatkah Anda menambahkan penjelasan, sehingga lebih banyak orang dapat mengerti.
Shanteshwar Inde

2

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 .


1
Ini adalah penggunaan atribut nama yang salah untuk input radio. Tombol radio dalam suatu grup harus memiliki nama yang sama jika Anda hanya ingin mengizinkan satu nilai dari grup. Melakukannya dengan cara ini membuatnya berfungsi seperti kotak centang, memungkinkan untuk beberapa pilihan daripada satu pilihan dalam grup.
MistyDawn

@MistyDawn Anda benar, saya bahkan tidak ingat bagaimana saya menulis ini, mungkin karena memperbaiki bug.
Yusuf Uzun

2

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

Ini bukan solusi yang sangat kuat. Lebih baik hanya memiliki div yang berisi, dan kemudian melihat semua radio di bawahnya dan pilih yang diperiksa. Anda juga dapat melihat semua radio dengan nama tertentu, dan kemudian menemukan yang dicentang. Ini mengurangi keharusan untuk mengubah kode setiap kali tombol ditambahkan.
Richard Duerr

Jika halaman Anda memiliki lebih dari 2 input radio, ini bisa membuat SANGAT membingungkan dan menetapkan id untuk setiap radio akan sangat memakan waktu. Metode ini biasanya tidak dianggap praktik yang baik.
MistyDawn

2

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

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

Ini pada dasarnya sama dengan jawaban ini dari lima tahun yang lalu, hanya tanpa inputdan dengan tanda kutip yang tidak perlu.
Monyet Sesat

Kutipan itu tidak perlu dan alasan saya memposting jawaban di atas adalah untuk memberi tahu orang bahwa input tidak diperlukan
shivamag00

Maka Anda harus mempertimbangkan mengedit pertanyaan Anda untuk menyebutkan alasan-alasan itu daripada menggunakan perintah "Gunakan kode berikut". Anda mungkin ingin merujuk sumber yang mengatakan bahwa kutipan tersebut diperlukan.
Monyet

@HereticMonkey Selesai edit ... Terima kasih :)
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

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());
            }
        });`
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.