Ik heb twee keuzerondjes in een HTML-formulier. Er verschijnt een dialoogvenster als een van de velden leeg is. Hoe kan ik controleren of een keuzerondje is geselecteerd?
Laten we doen alsof je HTML hebt zoals dit
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
Voor client-side validatie, hier's wat Javascript om te controleren welke geselecteerd is:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
Het bovenstaande zou efficiënter gemaakt kunnen worden, afhankelijk van de precieze aard van je opmaak, maar dat zou genoeg moeten zijn om je op weg te helpen.
Als je alleen maar wilt zien of een radiobutton is geselecteerd overal op de pagina, maakt PrototypeJS het heel gemakkelijk.
Hier's een functie die waar zal teruggeven als ten minste één radiobutton ergens op de pagina is geselecteerd. Nogmaals, dit moet misschien worden aangepast afhankelijk van uw specifieke HTML.
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
Voor server-side validatie (onthoud, je kunt niet volledig afhankelijk zijn van Javascript voor validatie!), zou het afhangen van je taal naar keuze, maar je'd controleert de gender
waarde van de request string.
Met jQuery, zou het zoiets zijn als
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
Laat me dat in stukjes uit elkaar halen om het duidelijker te dekken. jQuery verwerkt dingen van links naar rechts.
input[name=gender]:checked
input
beperkt het tot input tags.[name=gender]
beperkt het tot tags met de naam geslacht binnen de vorige groep.:checked
beperkt het tot checkboxes/radioknoppen die geselecteerd zijn binnen de vorige groep.Als je dit helemaal wilt vermijden, markeer dan één van de keuzerondjes als aangevinkt (checked="checked"
) in de HTML code, wat zou garanderen dat één keuzerondje altijd geselecteerd is.
Een vanille JavaScript manier
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;
}
}