Hvordan sjekke og fjerne en avmerkingsboks med jQuery

jQuery er En Javascript rammeverk som kan forenkle koding Javascript for et nettsted og fjerner mye kryss nettleser kompatibilitetsproblemer. I går så jeg på hvordan du får og angir formelementverdier med jQuery, men handlet ikke med boksene. Dagens innlegg ser på hvordan du kan fortelle om ET HTML – skjema er merket eller ikke merket med jQuery, og deretter hvordan du endrer det til å være un / sjekket.

Eksempelskjema

vårt eksempelskjema ser slik ut:

<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" />

det er avkrysningsboks med navn » foo » og deretter tre knapper. Den første kaller en funksjonfor å vise oss om avkrysningsruten er merket eller ikke, og de andre to endrer den fra å bli sjekket for ikke å bli sjekket.

Sjekk om avkrysningsruten er merket

Det er flere måter å finne ut om en avkrysningsrute er merket eller ikke med jQuery, og her et par alternativer. Hver vil returnere sant hvis det er merket eller usant hvis det ikke er.

$('input').is(':checked')$('input').attr('checked')

Sett avkrysningsruten til merket eller ikke merket

statusen til avkrysningsruten kan endres ved hjelp av attr () – funksjonen som så, for å merke av i boksen:

$('input').attr('checked', true);

og liker så å fjerne merket i boksen:

$('input').attr('checked', false);

Arbeidseksempel

og til slutt, her er eksempelformen i aksjon:

Et notat om boolske verdier

det er en diskusjon i kommentarene nedenfor om problemer funnet Med Chromium som kan være relatert til strengverdier av sann og falsk blir bestått, mens det må være strengt en boolsk sann eller falsk ellers uventede konsekvenser kan skje.

det har blitt foreslått å bruke .removeAttr () i stedet, men dette kan ha andre konsekvenser av min lesing av kommentarene på jquery-dokumentasjonssiden for funksjonen. Jeg vil følge opp dette innlegget på et senere tidspunkt og gjøre mer testing for å bekrefte sikkert

Bytte en avkrysningsboks når du klikker på en etikett

Merk At Javascript ikke er nødvendig for å bytte en avkrysningsboks når du klikker på tekst; DET ER HVA HTML <label>s er for. Har en lese av min oppfølging innlegg VED HJELP AV HTML <label > for å veksle og velg felt for mer informasjon.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.