Hvordan kan jeg lage en avkrysnings veksle vet fra å klikke på teksten etiketten også?

stemmer
30

Checkboxesi HTMLskjemaene ikke har implisitte etiketter med dem. Legge til en eksplisitt etikett (tekst) ved siden av den ikke veksle checkbox.

Hvordan kan jeg lage en avkrysnings veksle vet fra å klikke på teksten etiketten også?

Publisert på 05/08/2008 klokken 11:51
kilden bruker
På andre språk...                            


8 svar

stemmer
43

Hvis du riktig markup HTML-koden, er det ikke behov for javascript. Følgende kode vil tillate brukeren å klikke på etiketten teksten å huke av i boksen.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

Den for attributtet på etiketten element linker til id -attributtet på inngangselementet og nettleseren gjør resten.

Dette har blitt testet for å fungere i:

  • IE6
  • IE7
  • Firefox
Svarte 05/08/2008 kl. 12:00
kilden bruker

stemmer
17

Sett CSS displayeiendom for etiketten for å være en blokk element og bruk det i stedet for div - det holder den semantiske betydningen av en etikett samtidig som det styling du liker.

For eksempel:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Svarte 05/08/2008 kl. 12:52
kilden bruker

stemmer
3

Som indikert ved @Gatekiller og andre, er den riktige løsningen <label> -koden.

Click-in-the-tekst er fint, men det er en annen grunn til å bruke <label> tag: tilgjengelighet. Verktøyene som svaksynte folk bruker for å få tilgang til Internett trenger <label> s for å lese ut betydningen av boksene og radioknapper. Uten <label> s, må de gjette basert på omkringliggende tekst, og de ofte får det galt, eller å gi opp.

Det er veldig frustrerende å bli møtt med en form som leser "Vennligst velg fraktmetode, radio-Button1, radio-knappen2, radio-button3".

Legg merke til at web tilgjengelighet er et komplekst tema; <label> s er et nødvendig skritt, men de er ikke nok til å garantere tilgjengelighet eller overholdelse av offentlige reguleringer der det gjelder.

Svarte 25/08/2008 kl. 15:21
kilden bruker

stemmer
2

Ronnie,

Hvis du ønsket å legge teksten på etiketten og boksen inne i en wrapper element, kan du gjøre følgende:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Svarte 05/08/2008 kl. 12:28
kilden bruker

stemmer
1

Du kan bryte din boksen i etiketten:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Svarte 05/08/2008 kl. 12:25
kilden bruker

stemmer
0

Du må bare pakke inn boksen i etiketten tag akkurat som dette

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FELE

eller du kan også bruke den for egenskap av etiketten og id av boksen din som nedenfor

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FELE

Svarte 01/09/2015 kl. 12:10
kilden bruker

stemmer
-1

dette skal fungere:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

hvis den ikke, pleae corect meg!

Svarte 09/03/2015 kl. 12:13
kilden bruker

stemmer
-2

Innpakning med etiketten fortsatt ikke tillater klikke hvor som helst i boksen "- fortsatt bare på teksten! Dette gjør jobben for meg:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

men dessverre har mange javascript som er effektivt vippedrift to ganger.

Svarte 05/08/2008 kl. 12:34
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more