Torgny >JQueryuppgifter

JQueryuppgifter

1.

Kryss

När någon av kryssrutorna högst upp eller längst ner markeras skall samtliga rutor få samma värde, dvs antingen blir alla i eller avkryssade. Om sedan någon av rutorna mellan strecken ändras skall rutorna utanför strecken avmarkeras. Använd dig av JQuery för att åstadkomma detta.

Tips:

En användbar metod är attr(). Med ett argument ger den värdet på angivet attribut. Med två argument sätter du ett nytt värde. attr("checked", true) kryssar alltså i en checkbox.

Checkboxarna i formuläret kommer du åt med selektorn $("#formLista input"). Hur kommer du åt de två yttersta checkboxarna?

Html-kod

Till denna första uppgift får du en del av Css-koden här. På övriga uppgifter kan du bygga vidare på denna.

2.

FAQ

Denna FAQ är kodad i html med hjälp av en Definition list. Med hjälp av JQuery skall du göra så att svaren på frågorna kan plockas fram och döljas som på illustrationen. I utgångsläget skall alla svar vara dolda.

Formatera med CSS så att det liknar förlagan.

Tips:

next() är en bra funktion att använda om du vill ha påverka tagen efter en viss dt-tag.
$("#faq").find("dd") söker upp alla dd-taggar inom elementet med id=faq.
toggle() är en funktion som växelvis visar och döljer de element den kopplas till.

Css:

Använda färger: #CC3300, #FFFFCC, #FFFF66
Teckensnitt: Georgia
Specifikationen cursor:pointer kan du använda för att göra om musen till en pekare över dt-taggarna.

html-kod, bilder: