Come posso verificare se un pulsante di opzione è selezionato con JavaScript?

Ho due pulsanti di opzione all'interno di un modulo HTML. Quando uno dei campi è nullo, viene visualizzata una finestra di dialogo. Come posso verificare se è selezionato un pulsante di opzione?

Facciamo finta che tu abbia HTML come questo

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

Per la convalida lato client, ecco alcuni JavaScript per verificare quale è selezionato:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Quanto sopra potrebbe essere reso più efficiente a seconda della natura esatta del tuo markup, ma dovrebbe essere sufficiente per iniziare.

Se stai solo cercando di vedere se un pulsante di opzione è selezionato in qualsiasi punto della pagina, PrototypeJS lo rende molto semplice.

Ecco una funzione che restituirà true se almeno un pulsante di opzione viene selezionato da qualche parte nella pagina. Anche in questo caso, potrebbe essere necessario modificare questo aspetto a seconda del tuo HTML specifico.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Per la convalida lato server (ricorda, non puoi dipendere interamente da Javascript per la convalida!) , Dipenderà dalla tua lingua scelta, ma dovresti controllare il gendervalore della stringa di richiesta.

Con jQuery , sarebbe qualcosa di simile

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Fammi suddividerlo in pezzi per coprirlo più chiaramente. jQuery elabora le cose da sinistra a destra.

input[name=gender]:checked

1. input lo limita ai tag di input.
2. [name=gender] lo limita ai tag con il nome sesso all'interno del gruppo precedente.
3. :checked lo limita alle caselle di controllo / pulsanti di opzione selezionati all'interno del gruppo precedente.

Se vuoi evitarlo del tutto, contrassegna uno dei pulsanti di opzione come selezionato ( checked="checked") nel codice HTML, in modo da garantire che un pulsante di opzione sia sempre selezionato.

Un modo JavaScript vanigliato

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

Sto solo cercando di migliorare la soluzione di Russ Cam con un po 'di zucchero nel selettore CSS inserito con JavaScript vanilla.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

Non c'è davvero bisogno di jQuery qui, querySelectorAll è ampiamente supportato abbastanza ora.

Modifica: corretto un bug con il selettore css, ho incluso le virgolette, anche se puoi ometterle, in alcuni casi non puoi quindi è meglio lasciarle.

Codice HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Codice Javascript:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Puoi usare questo semplice script. Potresti avere più pulsanti di opzione con gli stessi nomi e valori diversi.

var checked_gender = document.querySelector('input[name = "gender"]:checked');

if(checked_gender != null){  //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}

Gli script in questa pagina mi hanno aiutato a trovare lo script qui sotto, che penso sia più completo e universale. Fondamentalmente convaliderà qualsiasi numero di pulsanti di opzione in un modulo, il che significa che si assicurerà che un'opzione radio sia stata selezionata per ciascuno dei diversi gruppi radio all'interno del modulo. ad es. nel modulo di prova sottostante:

   <form id="FormID">

    Yes <input type="radio" name="test1" value="Yes">
    No <input type="radio" name="test1" value="No">

    <br><br>

    Yes <input type="radio" name="test2" value="Yes">
    No <input type="radio" name="test2" value="No">

   <input type="submit" onclick="return RadioValidator();">

Lo script RadioValidator si assicurerà che sia stata data una risposta sia per "test1" che per "test2" prima dell'invio. Puoi avere tanti gruppi radio nel modulo e ignorerà qualsiasi altro elemento del modulo. Tutte le risposte radio mancanti verranno visualizzate in un unico popup di avviso. Ecco qua, spero che aiuti le persone. Eventuali correzioni di bug o modifiche utili sono benvenute :)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("FormID").elements;
    for (i = 0; i < AllFormElements.length; i++) 
    {
        if (AllFormElements[i].type == 'radio') 
        {
            var ThisRadio = AllFormElements[i].name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions[x].checked && ThisChecked == 'No')
                 {
                     ThisChecked = 'Yes';
                     break;
                 } 
            }   
            var AlreadySearched = ShowAlert.indexOf(ThisRadio);
            if (ThisChecked == 'No' && AlreadySearched == -1)
            {
            ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
            }     
        }
    }
    if (ShowAlert != '')
    {
    alert(ShowAlert);
    return false;
    }
    else
    {
    return true;
    }
}
</SCRIPT>

Nota questo comportamento con jQuery quando ottieni valori di input radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Quindi $('input[name="myRadio"]').val()non restituisce il valore selezionato dell'ingresso radio, come ci si potrebbe aspettare - restituisce il valore del primo pulsante di opzione.

Con mootools ( http://mootools.net/docs/core/Element/Element )

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

questa è una funzione di utilità che ho creato per risolvere questo problema

    //define radio buttons, each with a common 'name' and distinct 'id'. 
    //       eg- <input type="radio" name="storageGroup" id="localStorage">
    //           <input type="radio" name="storageGroup" id="sessionStorage">
    //param-sGroupName: 'name' of the group. eg- "storageGroup"
    //return: 'id' of the checked radioButton. eg- "localStorage"
    //return: can be 'undefined'- be sure to check for that
    function checkedRadioBtn(sGroupName)
    {   
        var group = document.getElementsByName(sGroupName);

        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).id;
            } else if (group[0].type !== 'radio') {
                //if you find any in the group not a radio button return null
                return null;
            }
        }
    }

Ciò sarebbe valido per i pulsanti di opzione che condividono lo stesso nome, non è necessario JQuery.

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

Se stiamo parlando di caselle di controllo e vogliamo un elenco con le caselle di controllo selezionate condividendo un nome:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

C'è un modo molto sofisticato per verificare se uno qualsiasi dei pulsanti di opzione è controllato con ECMA6 e metodo .some().

HTML:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

E javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedsarà truese alcuni dei pulsanti radio sono selezionati e falsese nessuno di essi è selezionato.

Con JQuery, un altro modo per controllare lo stato corrente dei pulsanti di opzione è ottenere l'attributo "verificato".

Per esempio:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

In questo caso puoi controllare i pulsanti utilizzando:

if ($("#gender_male").attr("checked") == true) {
...
}

solo una piccola modifica a Mark Biek;

CODICE HTML

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

e codice Javascript per verificare se il pulsante di opzione è selezionato

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Restituisce tutti gli elementi selezionati nel pulsante di opzione

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

Ho usato l' operatore spread e alcuni per verificare che almeno un elemento dell'array superi il test.

Condivido per chi preoccupazione.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender"  value="Female" / >

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

Questo codice avviserà il pulsante di opzione selezionato quando il modulo viene inviato. Ha usato jQuery per ottenere il valore selezionato.

$("form").submit(function(e) {
  e.preventDefault();
  $this = $(this);

  var value = $this.find('input:radio[name=COLOR]:checked').val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="COLOR" id="Rojo" type="radio" value="red">
  <input name="COLOR" id="Azul" type="radio" value="blue">
  <input name="COLOR" id="Amarillo" type="radio" value="yellow">
  <br>
  <input type="submit" value="Submit">
</form>

Ecco la soluzione che viene ampliata per non procedere con l'invio e inviare un avviso se i pulsanti di opzione non sono selezionati. Ovviamente questo significherebbe che devi averli deselezionati per cominciare!

if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
  alert ("You must select a button");
  return false;
}

Ricorda solo di impostare l'id ('radio1', 'radio2' o come lo hai chiamato) nel modulo per ciascuno dei pulsanti di opzione o lo script non funzionerà.

Un esempio:

if (!checkRadioArray(document.ExamEntry.level)) { 
    msg+="What is your level of entry? \n"; 
    document.getElementById('entry').style.color="red"; 
    result = false; 
} 

if(msg==""){ 
    return result;  
} 
else{ 
    alert(msg) 
    return result;
} 

function Radio() { 
    var level = radio.value; 
    alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.") 
} 

function checkRadioArray(radioButtons) { 
    for(var r=0;r < radioButtons.length; r++) { 
        if (radioButtons[r].checked) { 
            return true; 
        } 
    } 
    return false; 
} 

Il modulo

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

Il copione

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

Il violino: http://jsfiddle.net/PNpUS/

Voglio solo assicurarmi che qualcosa venga selezionato (usando jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}

Se vuoi JavaScript vanilla, non vuoi ingombrare il tuo markup aggiungendo ID su ogni pulsante di opzione e ti preoccupi solo dei browser moderni , il seguente approccio funzionale è un po 'più di buon gusto per me di un ciclo for:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

Se nessuno dei due è selezionato, tornerà undefined(sebbene tu possa cambiare la riga sopra per restituire qualcos'altro, ad esempio, per essere falserestituito, potresti cambiare la riga pertinente sopra a:}).pop() || {value:false}).value; .

Esiste anche l'approccio polyfill lungimirante poiché l' interfaccia RadioNodeList dovrebbe semplificare l'uso di una valueproprietà nell'elenco degli elementi radio figlio del modulo (che si trova nel codice sopra come formElement[radioName]), ma questo ha i suoi problemi: Come polyfill RadioNodeList ?

Funziona anche questo, evitando di chiamare un ID elemento ma chiamandolo usando come elemento array.

Il codice seguente si basa sul fatto che un array, denominato gruppo radiobuttons, è composto da elementi radiobuttons nello stesso ordine in cui sono stati dichiarati nel documento html:

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

JAVAScritto:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}

Provare

[...myForm.sex].filter(r=>r.checked)[0].value

function check() {
  let v= ([...myForm.sex].filter(r=>r.checked)[0] || {}).value ;
  console.log(v);
}

<form id="myForm">
  <input name="sex" type="radio" value="men"> Men
  <input name="sex" type="radio" value="woman"> Woman
</form>
<br><button onClick="check()">Check</button>

Assegna pulsanti di opzione, stesso nome ma ID diversi.

var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
  //condition
  final_answer = verified1;
}
else
{
  if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
    //condition
    final_answer = verified2;
   }
   else
   {
     return false;
   }
}