Jeg har to alternativknapper i et HTML-skjema. En dialogboks vises når ett av feltene er null. Hvordan kan jeg sjekke om en alternativknapp er valgt?
La oss late som om du har HTML som dette
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
For validering på klientsiden, her er litt Javascript for å sjekke hvilken som er valgt:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
Ovennevnte kan gjøres mer effektivt avhengig av den nøyaktige arten av markeringen din, men det bør være nok til å komme i gang.
Hvis du bare er ute etter å se om en hvilken som helst radioknapp er valgt et hvilket som helst sted på siden, gjør PrototypeJS det veldig enkelt.
Her er en funksjon som returnerer true hvis minst én alternativknapp er valgt et sted på siden. Igjen, dette må kanskje justeres avhengig av din spesifikke HTML.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
For validering på serversiden (husk at du ikke kan være helt avhengig av Javascript for validering!), vil det avhenge av hvilket språk du velger, men du må kontrollere "gender"-verdien for forespørselsstrengen.
Med jQuery ville det være noe sånt som
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
La meg bryte det ned i biter for å dekke det tydeligere. jQuery behandler ting fra venstre til høyre.
input[name=gender]:checked
input
begrenser det til input tags.[name=gender]
begrenser det til tagger med navnet gender innenfor den forrige gruppen.:checked
begrenser det til avmerkingsbokser/radioknapper som er valgt i den forrige gruppen.Hvis du vil unngå dette helt, merker du en av radioknappene som avkrysset (checked="checked"
) i HTML-koden, noe som vil garantere at én radioknapp alltid er valgt.
En vanilje JavaScript-måte
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;
}
}