jQuery är en Javascript-ram som kan förenkla kodning Javascript för en webbplats och tar bort en hel del kors webbläsare kompatibilitetsproblem. Igår tittade jag på hur man får och ställer in formulärelementvärden med jQuery men hanterade inte kryssrutor. Dagens inlägg tittar på hur man berättar om en HTML-blankett kryssruta är markerad eller inte markerad med jQuery och sedan hur man ändrar den för att vara un/markerad.
Exempelformulär
vårt exempelformulär ser ut så här:
<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 finns kryssrutan med namnet ” foo ” och sedan tre knappar. Den första kallar en funktionFör att visa oss om kryssrutan är markerad eller inte, och de andra två ändrar den från att vara markerad till att inte kontrolleras.
kontrollera om kryssrutan är markerad
det finns flera sätt att få reda på om en kryssruta är markerad eller inte med jQuery, och här ett par alternativ. Varje kommer att returnera sant om det är markerat eller falskt om det inte är det.
$('input').is(':checked')$('input').attr('checked')
Ställ in kryssrutan till markerad eller inte markerad
status för kryssrutan kan ändras med funktionen attr () som så, för att markera rutan:
$('input').attr('checked', true);
och så för att avmarkera rutan:
$('input').attr('checked', false);
arbetsexempel
och slutligen, här är exempelformuläret i aktion:
en anteckning om booleska värden
det diskuteras i kommentarerna nedan om problem som finns med krom som kan relateras till strängvärden för sant och falskt som passeras medan det måste vara strikt en boolesk sant eller falskt annars kan oväntade konsekvenser hända.
det har föreslagits att använda .removeAttr () istället men det kan få andra konsekvenser av min läsning av kommentarerna på jQuery-dokumentationssidan för funktionen. Jag kommer att följa upp det här inlägget vid ett senare tillfälle och göra mer testning för att bekräfta säkert
växla en kryssruta när du klickar på en etikett
Observera att Javascript inte krävs för att växla en kryssruta när du klickar på någon text; Det är vad HTML <etikett> s är för. Läs av mitt uppföljningsinlägg med HTML < etikett> för att växla och välja fält för mer information.