Ho due pulsanti radio all'interno di un modulo HTML. Una finestra di dialogo appare quando uno dei campi è nullo. Come posso controllare se un pulsante di opzione è selezionato?
Facciamo finta di avere un 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 validazione lato client, ecco un po' di Javascript per controllare 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 vostro markup, ma questo dovrebbe essere sufficiente per iniziare.
Se stai solo cercando di vedere se qualsiasi pulsante radio è selezionato in qualsiasi punto della pagina, PrototypeJS lo rende molto facile.
Ecco una funzione che restituirà true se almeno un pulsante radio è selezionato da qualche parte nella pagina. Di nuovo, questo potrebbe aver bisogno di essere modificato a seconda del vostro HTML specifico.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
Per la convalida lato server (ricordate, non potete dipendere interamente da Javascript per la convalida!), dipenderebbe dal vostro linguaggio preferito, ma dovreste controllare il valore gender
della stringa della richiesta.
Con jQuery, sarebbe qualcosa come
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
Lasciatemi rompere questo in pezzi per coprirlo più chiaramente. jQuery elabora le cose da sinistra a destra.
input[name=gender]:checked
input
lo limita ai tag di input.[name=gender]
lo limita ai tag con il nome gender all'interno del gruppo precedente.:checked
lo limita alle caselle di controllo/bottoni radio che sono selezionati all'interno del gruppo precedente.Se vuoi evitarlo del tutto, contrassegna uno dei pulsanti radio come controllato (checked="checked"
) nel codice HTML, che garantirebbe che un pulsante radio sia sempre selezionato.
Un modo JavaScript alla vaniglia
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;
}
}