Wie kann ich von einem Klick auf dem Text-Label als auch eine Checkbox Toggle machen?

stimmen
29

Checkboxesin HTMLFormen haben keine implizite Etiketten mit ihnen. Hinzufügen eines expliziten Etikett (etwas Text) neben ihm wechseln nicht die checkbox.

Wie kann ich von einem Klick auf dem Text-Label als auch eine Checkbox Toggle machen?

Veröffentlicht am 05/08/2008 um 12:51
quelle vom benutzer
In anderen Sprachen...                            


8 antworten

stimmen
43

Wenn Sie die korrekte Schreibweise Ihrer HTML-Code Markup, gibt es keine Notwendigkeit für Javascript. Der folgende Code ermöglicht es dem Benutzer auf dem Etikett Text klicken, um das Kontrollkästchen ankreuzen.

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

Der für Attribut auf dem Etikett Element Anschluss an das id - Attribut auf dem Eingangselement und den Browser erledigt den Rest.

Dies wurde die Prüfung in Arbeit:

  • IE6
  • IE7
  • Feuerfuchs
Beantwortet am 05/08/2008 um 13:00
quelle vom benutzer

stimmen
17

Stellen Sie die CSS - displayEigenschaft für das Label ein Blockelement und Verwendung zu sein, statt Ihre div - es die semantische Bedeutung eines Etiketts hält und ermöglicht , was Styling Sie mögen.

Beispielsweise:

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

Beantwortet am 05/08/2008 um 13:52
quelle vom benutzer

stimmen
3

Wie durch @Gatekiller und andere schon angedeutet, ist die richtige Lösung der <label> -Tag.

Click-in-the-Text ist schön, aber es ist ein weiterer Grund, die <label> -Tags zu verwenden: Zugänglichkeit. Die Werkzeuge, die sehbehinderten Menschen auf das Web zuzugreifen verwenden müssen das <label> s die Bedeutung von Checkboxen und Radio-Buttons, um das Auslesen. Ohne <label> s, müssen sie auf die umgebenden Text erraten basiert, und sie bekommen es oft falsch oder aufgeben müssen.

Es ist sehr frustrierend , mit einer Form konfrontiert werden, der lautet : „Bitte wählen Sie Ihre Versandart, Radio-button1, Radio-button2, Radio-button3“.

Beachten Sie, dass die Web-Zugänglichkeit ein komplexes Thema ist; <Label> s sind ein notwendiger Schritt, aber sie sind nicht genug, um die Zugänglichkeit oder die Einhaltung gesetzlicher Vorschriften zu gewährleisten, wo es gilt.

Beantwortet am 25/08/2008 um 16:21
quelle vom benutzer

stimmen
2

Ronnie,

Wenn Sie das Etikett Text und Kontrollkästchen in einem Hüllenelement umschließen wollen, könnten Sie Folgendes tun:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Beantwortet am 05/08/2008 um 13:28
quelle vom benutzer

stimmen
1

Sie können Ihre Checkbox in der Label-Verpackung:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Beantwortet am 05/08/2008 um 13:25
quelle vom benutzer

stimmen
0

Sie müssen nur das Kontrollkästchen in Label-Tag wickeln einfach so

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

GEIGE

oder Sie können das auch verwenden für Attribut von Etiketten- und id wie unten Ihrer Checkbox

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

GEIGE

Beantwortet am 01/09/2015 um 12:10
quelle vom benutzer

stimmen
-1

das sollte funktionieren:

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

wenn es tut, pleae corect mich!

Beantwortet am 09/03/2015 um 12:13
quelle vom benutzer

stimmen
-2

mit der Bezeichnung Wrapping erlaubt es noch nicht ‚überall in der Box‘ klicken - nach wie vor nur auf dem Text! Dies macht den Job für mich:

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

aber leider hat viele Javascript, die effektiv zweimal ist Makeln.

Beantwortet am 05/08/2008 um 13:34
quelle vom benutzer

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