Hoe maak ik een checkbox toggle uit te klikken op de tekst label ook?

stemmen
29

Checkboxesin HTMLformulieren hoeft niet impliciete labels met hen. Een expliciete label (tekst) naast het toe te voegen niet wisselen de checkbox.

Hoe maak ik een checkbox toggle uit te klikken op de tekst label ook?

De vraag is gesteld op 05/08/2008 om 12:51
bron van user
In andere talen...                            


8 antwoorden

stemmen
43

Als u de juiste opmaak van uw HTML-code, is er geen behoefte aan javascript. De volgende code kan de gebruiker om te klikken op het label tekst naar het hokje.

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

De voor het attribuut op het etiket element links naar de id attribuut op de input element en de browser doet de rest.

Dit is het testen om te werken:

  • IE6
  • IE7
  • Firefox
antwoordde op 05/08/2008 om 13:00
bron van user

stemmen
17

Stel de CSS- displayeigenschap voor het label om een blok element en het gebruik dat in plaats van uw div - het houdt de semantische betekenis van een label terwijl wat styling je wilt.

Bijvoorbeeld:

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

antwoordde op 05/08/2008 om 13:52
bron van user

stemmen
3

Zoals aangegeven door @Gatekiller en anderen, de juiste oplossing is de <label> tag.

Klik-in-the-tekst is leuk, maar er is nog een reden om de <label> tag gebruiken: toegankelijkheid. De tools die visueel gehandicapte mensen gebruiken om toegang tot het web moet de <label> is om de betekenis van checkboxes en radio knoppen uit te lezen. Zonder <label> s, ze hebben om te raden op basis van de omringende tekst, en ze krijgen vaak het verkeerd of op te geven.

Het is erg frustrerend om te worden geconfronteerd met een vorm die leest "Selecteer uw verzendmethode, radio-Button1, radio-button2, radio-button3".

Merk op dat de toegankelijkheid van het web is een complex onderwerp; <Label> s zijn een noodzakelijke stap, maar ze zijn niet voldoende om de toegankelijkheid of de naleving garanderen door regelgeving van de overheid, waar het van toepassing is.

antwoordde op 25/08/2008 om 16:21
bron van user

stemmen
2

Ronnie,

Als je wilde het label tekst en checkbox in een wrapper element omsluiten, kon u het volgende doen:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
antwoordde op 05/08/2008 om 13:28
bron van user

stemmen
1

U kunt uw checkbox verpakken in het label:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
antwoordde op 05/08/2008 om 13:25
bron van user

stemmen
0

Je moet gewoon wikkel de checkbox in etiketmarkering net als dit

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

VIOOL

of u kunt ook gebruik maken van de voor het attribuut van label en id van uw checkbox zoals hieronder

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

VIOOL

antwoordde op 01/09/2015 om 12:10
bron van user

stemmen
-1

dit zou moeten werken:

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

Als het niet, pleae corect me!

antwoordde op 09/03/2015 om 12:13
bron van user

stemmen
-2

Het verpakken met het label nog steeds niet toe te klikken op 'ergens in het kader' - nog net over de tekst! Dit doet het werk voor mij:

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

maar helaas heeft veel javascript die effectief twee keer verspringt.

antwoordde op 05/08/2008 om 13:34
bron van user

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