Come posso sapere quale pulsante di opzione è selezionato tramite jQuery?

Ho due pulsanti di opzione e desidero pubblicare il valore di quello selezionato. Come posso ottenere il valore con jQuery?

Posso ottenerli tutti così:

$("form :radio")

Come faccio a sapere quale è selezionato?

Per ottenere il valore dell'elemento selezionato radioName di un modulo con ID myForm:

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

Ecco un esempio:

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

Usa questo..

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

Se hai già un riferimento a un gruppo di pulsanti di opzione, ad esempio:

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

Utilizzare la filter()funzione, no find(). ( find()serve per localizzare elementi figlio / discendente, mentre filter()cerca elementi di livello superiore nella selezione.)

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

Note: questa risposta originariamente correggeva un'altra risposta che raccomandava di utilizzare find(), che sembra essere stata modificata da allora. find()potrebbe comunque essere utile per la situazione in cui si aveva già un riferimento a un elemento contenitore, ma non ai pulsanti di opzione, ad esempio:

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

Questo dovrebbe funzionare:

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

Nota "" utilizzato attorno all'input: controllato e non '' come la soluzione di Peter J.

È possibile utilizzare il: selettore selezionato insieme al selettore radio.

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

Se vuoi solo il valore booleano, ovvero se è selezionato o meno prova questo:

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

Ottieni tutte le radio:

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

Filtro per ottenere quello verificato

radios.filter(":checked")

Un'altra opzione è:

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

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

Ecco come vorrei scrivere il modulo e gestire l'ottenimento della radio controllata.

Utilizzando un modulo chiamato myForm:

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

Ottieni il valore dal modulo:

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

Se non stai pubblicando il modulo, lo semplificherei ulteriormente utilizzando:

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

Quindi ottenere il valore verificato diventa:

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

Avere un nome di classe sull'input mi permette di modellare facilmente gli input ...

Nel mio caso ho due pulsanti di opzione in una forma e volevo conoscere lo stato di ciascun pulsante. Questo sotto ha funzionato per me:

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

In un pulsante di opzione generato da JSF (usando il <h:selectOneRadio>tag), puoi fare questo:

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

dove selectOneRadio ID è radiobutton_id e ID modulo è form_id .

Assicurati di usare name invece id , come indicato, perché jQuery utilizza questo attributo (il nome viene generato automaticamente da JSF simile all'ID di controllo).

Inoltre, controlla se l'utente non seleziona nulla.

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

Ho scritto un plugin jQuery per impostare e ottenere i valori dei pulsanti di opzione. Rispetta anche l'evento di "cambiamento" su di loro.

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

Inserisci il codice ovunque per abilitare il componente aggiuntivo. Allora divertiti! Sostituisce semplicemente la funzione val predefinita senza interrompere nulla.

Puoi visitare questo jsFiddle per provarlo in azione e vedere come funziona.

Violino

Se hai più pulsanti di opzione in forma singola, allora

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

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

Questo funziona per me.

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

Funziona benissimo

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

Demo di lavoro

Il :checkedselettore funziona per checkboxes, radio buttonse selezionare elementi. Solo per gli elementi selezionati, utilizzare il :selectedselettore.

API per :checked Selector

Per ottenere il valore della radio selezionata che utilizza una classe:

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

Uso questo semplice script

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

Usa questo:

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>

Se hai 1 solo set di pulsanti di opzione su 1 modulo, il codice jQuery è semplice come questo:

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

Ho rilasciato una libreria per aiutare con questo. Estrae tutti i possibili valori di input, in realtà, ma include anche quale pulsante di opzione è stato verificato. Puoi verificarlo su https://github.com/mazondo/formalizedata

Ti darà un oggetto js delle risposte, quindi un modulo come:

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

ti darà:

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

Per recuperare tutti i valori dei pulsanti di opzione nell'array JavaScript, utilizzare il seguente codice jQuery:

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

Provalo-

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

console.log(radioVal);

JQuery per ottenere tutti i pulsanti di opzione nel modulo e il valore selezionato.

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

Un altro modo per ottenerlo:

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

Da questa domanda , ho trovato un modo alternativo per accedere a quello attualmente selezionato inputquando sei all'interno di un clickevento per la rispettiva etichetta. Il motivo è perché il nuovo selezionato inputnon viene aggiornato fino a dopo l' labelevento relativo al clic.

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>

Quello che dovevo fare era semplificare il codice C #, ovvero fare il più possibile nel front-end JavaScript. Sto usando un contenitore fieldset perché sto lavorando in DNN e ha una sua forma. Quindi non posso aggiungere un modulo.

Devo verificare quale casella di testo su 3 viene utilizzata e, in caso affermativo, qual è il tipo di ricerca? Inizia con il valore, contiene il valore, corrispondenza esatta del valore.

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>

E il mio JavaScript è:

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

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

    }

Basta dire qualsiasi tag contenente un ID può essere utilizzato. Per DNNers, questo è buono a sapersi. L'obiettivo finale qui è passare al codice di medio livello ciò che è necessario per avviare una ricerca di parti in SQL Server.

In questo modo non devo copiare anche il codice C # precedente molto più complicato. Il sollevamento pesante viene eseguito proprio qui.

Ho dovuto cercare un po 'questo e poi armeggiarlo per farlo funzionare. Quindi, per altri DNNer, si spera che sia facile da trovare.