bind:checked valintaruuduille
Sitoikaa boolean-muuttuja valintaruudun checked-tilaan.
bind:checked valintaruuduille on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Valintaruudun sidonta
Käyttäkää bind:checked-direktiiviä boolean-arvon synkronoimiseen valintaruudun kanssa.
<input type="checkbox" bind:checked={agreed} />Tilan lukeminen
Sidotun muuttujan arvo on true, kun valintaruutu on valittu, ja false, kun sitä ei ole valittu.
Näkyvyyden vaihtaminen
Yhdistäkää tämä {#if}-rakenteeseen sisällön näyttämiseksi tai piilottamiseksi valintaruudun perusteella.
{#if agreed}<p>Thanks!</p>{/if}Asettaminen ohjelmallisesti
Muuttujan arvon muuttaminen vaihtaa valintaruudun tilaa.
function reset() { agreed = false; }Useita valintaruutuja
Itsenäisiä valintaruutuja varten määrittäkää yksi muuttuja kullekin valintaruudulle.
let sub = false, terms = false;Kolmitilaiset syötteet
DOM:ssa on myös indeterminate-ominaisuus, jonka voitte sitoa bind:indeterminate-direktiivillä.
<input type="checkbox" bind:indeterminate={partial} />Lomakeintegraatio
Valintaruudun tila osallistuu lomakkeen lähetykseen kuten minkä tahansa syötteen tila.
Label-elementin käyttö
Ympäröikää valintaruutu <label>-elementillä, jotta tunnisteen napsauttaminen vaihtaa sen tilaa.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Saavutettavuus
Merkitkää valintaruudut aina tunnisteilla. Ruudunlukijat tarvitsevat näkyviä tunnisteita asiayhteyden ymmärtämiseen.
Käytöstä poistettu tila
Yhdistäkää tämä disabled={...}-attribuuttiin vain luettavien valintaruutujen luomiseksi.
Reaktiiviset sivuvaikutukset
Reagoikaa muutoksiin $:-lausekkeella, joka suoritetaan sidotun muuttujan päivittyessä.
$: if (dark) document.body.classList.add("dark");Pikatarkistus
Mihin bind:checked sitoo arvon?
Kertaus
bind:checked sitoo boolean-arvon valintaruutuun. Käyttäkää bind:indeterminate-direktiiviä kolmanteen visuaaliseen tilaan.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”bind:checked valintaruuduille” ilmainen?
Kyllä – oppitunnin ”bind:checked valintaruuduille” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”bind:checked valintaruuduille”?
Sitoikaa boolean-muuttuja valintaruudun checked-tilaan. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”bind:checked valintaruuduille”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- bind:value tekstikentille
- bind:checked valintaruuduille
- bind:group radio- ja valintaruuturyhmille
- bind:this DOM-elementtien viitteille