Wie mache ich ein Kontrollkästchen Umschalten durch klicken auf das text-label, wie gut?

Question

Checkboxes in HTML Formen nicht haben, implizite labels mit Ihnen.Hinzufügen einer expliziten Kennzeichnung (text), neben, es nicht schalten Sie die checkbox.

Wie mache ich ein Kontrollkästchen Umschalten durch klicken auf das text-label, wie gut?

Answer 1

Legen Sie die CSS - display - Eigenschaft für das Etikett ein block-element und verwenden, statt Ihre div - es hält die semantische Bedeutung eine Bezeichnung, während in dem, was styling, die Sie mögen.

Zum Beispiel:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Answer 2

Wenn Sie richtig markup Ihren HTML-code, es ist keine Notwendigkeit für javascript.Der folgende code ermöglicht es dem Benutzer, klicken Sie auf den label-text aktivieren Sie das Kontrollkästchen.

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

Die für Attribut des label-Elements links zu den id - Attribut für input-element und den browser erledigt den rest.

Diese wurde die Prüfung zu arbeiten:

• IE6
• IE7
• Firefox

Answer 3

Wie von @Gatekiller und andere, die richtige Lösung ist der <label> tag.

Klicken Sie auf-in-die-text ist schön, aber es ist ein weiterer Grund für die Verwendung von <label> Tags:Barrierefreiheit.Die Werkzeuge, die sehbehinderte Menschen benutzen, um auf das web zuzugreifen, müssen Sie die <label>s Lesen Sie die Bedeutung der Checkboxen und radio-buttons.Ohne <label>s, Sie haben zu erraten, basierend auf dem umgebenden text, und Sie bekommen oft falsch oder aufgeben zu müssen.

Es ist sehr frustrierend zu sein, konfrontiert mit einer form, die liest "Bitte wählen Sie Ihre Versandart, radio-button1 -, radio-button2 -, radio-button3".

Beachten Sie, dass die Barrierefreiheit ist ein Komplexes Thema;<label>s sind ein notwendiger Schritt, aber Sie sind nicht genug, um die Garantie für die Erreichbarkeit oder die compliance mit gesetzlichen Bestimmungen, bei denen es gilt.

Answer 4

Ronnie,

Wenn Sie wollten, schließen Sie den label-text und checkbox innerhalb einer wrapper-element, könnten Sie Folgendes tun:

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

Answer 5

Sie können wickeln Sie Ihr Kontrollkästchen in der Bezeichnung:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

Answer 6

Sie müssen nur wrap Sie die checkbox, label-tag, genau wie diese

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

FIDDLE

oder Sie können auch mit den für - Attribut des label-und id Ihre Kontrollkästchen, wie unten

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

FIDDLE

Answer 7

sollte dies 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 doesnt, schicken dringende bitte corect mich!

Answer 8

Verpackung mit dem label noch nicht erlauben, klicken auf "überall in der box" - nur noch auf den text!Das 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 jede Menge javascript-Code, effektiv Umschalten zweimal.