Bagaimana saya bisa tahu tombol radio mana yang dipilih melalui jQuery?

Saya memiliki dua tombol radio dan ingin memposting nilai yang dipilih. Bagaimana saya bisa mendapatkan nilai dengan jQuery?

Saya bisa mendapatkan semuanya seperti ini:

$("form :radio")

Bagaimana saya tahu yang mana yang dipilih?

Untuk mendapatkan nilai yang dipilih radioName item formulir dengan id myForm:

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

Ini sebuah contoh:

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

Gunakan ini..

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

Jika Anda sudah memiliki referensi ke grup tombol radio, misalnya:

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

Gunakan filter()fungsinya, bukan find(). ( find()untuk menemukan elemen turunan / turunan, sedangkan filter()mencari elemen tingkat atas dalam pilihan Anda.)

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

Catatan: Jawaban ini awalnya mengoreksi jawaban lain yang direkomendasikan untuk digunakan find(), yang tampaknya telah diubah sejak saat itu. find()masih bisa berguna untuk situasi di mana Anda sudah memiliki referensi ke elemen wadah, tetapi tidak ke tombol radio, misalnya:

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

Ini seharusnya bekerja:

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

Perhatikan "" yang digunakan di sekitar input: dicentang dan tidak "" seperti solusi Peter J.

Anda dapat menggunakan pemilih yang diperiksa: bersama dengan pemilih radio.

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

Jika Anda hanya menginginkan nilai boolean, yaitu apakah dicentang atau tidak coba ini:

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

Dapatkan semua radio:

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

Saring untuk memeriksanya

radios.filter(":checked")

Pilihan lain adalah:

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

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

Inilah cara saya akan menulis formulir dan menangani pengambilan radio yang diperiksa.

Menggunakan formulir yang disebut myForm:

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

Dapatkan nilai dari formulir:

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

Jika Anda tidak memposting formulir, saya akan menyederhanakannya lebih lanjut dengan menggunakan:

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

Kemudian mendapatkan nilai yang diperiksa menjadi:

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

Memiliki nama kelas pada input memungkinkan saya untuk dengan mudah mendesain input ...

Dalam kasus saya, saya memiliki dua tombol radio dalam satu bentuk dan saya ingin mengetahui status setiap tombol. Ini di bawah ini bekerja untuk saya:

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

Dalam tombol radio yang dihasilkan JSF (menggunakan <h:selectOneRadio>tag), Anda dapat melakukan ini:

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

di mana selectOneRadio ID adalah radiobutton_id dan form ID adalah form_id .

Pastikan untuk menggunakan nama, bukan id , seperti yang ditunjukkan, karena jQuery menggunakan atribut ini ( nama dihasilkan secara otomatis oleh JSF menyerupai ID kontrol).

Juga, periksa apakah pengguna tidak memilih apa pun.

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

Saya menulis plugin jQuery untuk pengaturan dan mendapatkan nilai tombol radio. Itu juga menghormati acara "perubahan" pada mereka.

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

Letakkan kode di mana saja untuk mengaktifkan addin. Maka nikmatilah! Itu hanya mengesampingkan fungsi val default tanpa merusak apa pun.

Anda dapat mengunjungi jsFiddle ini untuk mencobanya, dan melihat cara kerjanya.

Biola

Jika Anda memiliki beberapa tombol radio dalam bentuk tunggal, maka

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

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

Ini bekerja untuk saya.

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

Ini berfungsi dengan baik

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

Demo yang Bekerja

The :checkedpemilih bekerja untuk checkboxes, radio buttonsdan pilih elemen. Untuk elemen tertentu saja, gunakan :selectedpemilih.

API untuk :checked Selector

Untuk mendapatkan nilai radio yang dipilih yang menggunakan kelas:

$('.class:checked').val()

Saya menggunakan skrip sederhana ini

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

Gunakan ini:

value = $('input[name=button-name]:checked').val();

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

Jika Anda hanya memiliki 1 set tombol radio pada 1 formulir, kode jQuery sesederhana ini:

$( "input:checked" ).val()

Saya telah merilis perpustakaan untuk membantu ini. Menarik semua nilai input yang mungkin, sebenarnya, tetapi juga termasuk tombol radio mana yang diperiksa. Anda dapat memeriksanya di https://github.com/mazondo/formalizedata

Ini akan memberi Anda objek js dari jawaban, jadi formulir seperti:

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

akan memberimu:

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

Untuk mengambil semua nilai tombol radio dalam larik JavaScript gunakan kode jQuery berikut:

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

Cobalah-

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

console.log(radioVal);

JQuery untuk mendapatkan semua tombol radio dalam bentuk dan nilai yang diperiksa.

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

Cara lain untuk mendapatkannya:

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

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

Dari pertanyaan ini , saya menemukan cara alternatif untuk mengakses yang saat ini dipilih inputketika Anda berada dalam suatu clickacara untuk label masing-masing. Alasannya adalah karena yang baru dipilih inputtidak diperbarui sampai setelah labelacara kliknya.

TL; DR

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

  ...
});

$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

Apa yang perlu saya lakukan adalah menyederhanakan kode C #, yaitu melakukan sebanyak mungkin di JavaScript ujung depan. Saya menggunakan wadah fieldset karena saya bekerja di DNN dan memiliki bentuknya sendiri. Jadi saya tidak bisa menambahkan formulir.

Saya perlu menguji kotak teks mana dari 3 yang digunakan dan jika ya, apa jenis pencariannya? Mulai dengan nilainya, Berisi nilainya, Pencocokan tepat nilainya.

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>

Dan JavaScript saya adalah:

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

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

    }

Hanya mengatakan tag berisi ID apa pun dapat digunakan. Untuk DNNers, ini baik untuk diketahui. Tujuan akhir di sini adalah meneruskan ke kode tingkat menengah apa yang diperlukan untuk memulai pencarian bagian dalam SQL Server.

Dengan cara ini saya tidak perlu menyalin kode C # sebelumnya jauh lebih rumit juga. Pengangkatan berat sedang dilakukan di sini.

Saya harus mencari sedikit untuk ini dan kemudian bermain-main dengannya untuk membuatnya bekerja. Jadi untuk DNNers lain, mudah-mudahan ini mudah ditemukan.