jQuery is een Javascript framework dat codering Javascript voor een website kan vereenvoudigen en verwijdert veel cross browser compatibiliteitsproblemen. Gisteren keek ik naar hoe te krijgen en stel vormelement waarden met jQuery, maar niet omgaan met checkboxes. De post van vandaag kijkt naar hoe te vertellen of een HTML-Formulier checkbox is aangevinkt of niet gecontroleerd met jQuery en vervolgens hoe het te veranderen om un/checked.
voorbeeld formulier
ons voorbeeld formulier ziet er zo uit:
<input type="checkbox" name="foo" value="bar" /><input type="button" onclick="show_checked()" value="Show" /><input type="button" onclick="set_checked(true)" value="On" /><input type="button" onclick="set_checked(false)" value="Off" />
er is checkbox met de naam ” foo ” en dan drie knoppen. De eerste roept een functie aan om ons te laten zien of het selectievakje is aangevinkt of niet, en de tweede twee veranderen het van gecontroleerd naar niet gecontroleerd.
Controleer of het selectievakje is aangevinkt
er zijn verschillende manieren om uit te zoeken of een selectievakje is aangevinkt of niet met jQuery, en hier een paar alternatieven. Elk retourneert true als het is aangevinkt of false als het niet is.
$('input').is(':checked')$('input').attr('checked')
schakel het selectievakje in op aangevinkt of niet aangevinkt
de status van het selectievakje kan worden gewijzigd met de functie attr() om het selectievakje aan te vinken:
$('input').attr('checked', true);
en zo om het vakje uit te schakelen:
$('input').attr('checked', false);
werkvoorbeeld
en tenslotte, hier is het voorbeeldformulier in actie:
een opmerking over Booleaanse waarden
er is een discussie in de commentaren hieronder over problemen gevonden met chroom die gerelateerd kunnen zijn aan string waarden van waar en onwaar worden doorgegeven terwijl het strikt een Booleaanse waar of onwaar moet zijn anders kunnen onverwachte gevolgen optreden.
het is aanbevolen om te gebruiken .removeAttr () in plaats daarvan, maar dit kan andere gevolgen hebben van mijn lezing van de opmerkingen op de jquery documentatie pagina voor de functie. Ik zal dit bericht later opvolgen en meer testen uitvoeren om zeker te bevestigen dat
een selectievakje aan / uitschakelt bij het klikken op een label
merk op dat Javascript niet nodig is om een selectievakje aan / uit te schakelen bij het klikken op een tekst; dat is waar HTML <label>s voor zijn. Lees mijn vervolgbericht met behulp van HTML <label> om velden te schakelen en te selecteren voor meer informatie.