Wie kann ich ein Kontrollkästchen aktivieren, wenn ich auf das Textlabel klicke?

Question

Checkboxes in HTML Formen haben nicht implizit Etiketten mit ihnen. Durch Hinzufügen einer expliziten Beschriftung (ein wenig Text) daneben wird die checkbox nicht umgeschaltet.

Wie kann ich ein Kontrollkästchen aktivieren, indem ich auf das Textlabel klicke?

Answer 1

Setzen Sie die CSS display -Eigenschaft für das Label auf ein Blockelement und verwenden Sie dieses anstelle Ihres div - es behält die semantische Bedeutung eines Labels bei und ermöglicht das gewünschte Styling.

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 Ihren HTML-Code korrekt markieren, ist kein JavaScript erforderlich. Mit dem folgenden Code kann der Benutzer auf den Beschriftungstext klicken, um das Kontrollkästchen zu aktivieren.

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

Die für Attribut auf dem Etikettenelement Verbindungen zum ID Attribute auf dem Eingabeelement und den Browser den Rest.

Dies wurde Prüfung in Arbeit:

• IE6
• IE7
• Firefox

Answer 3

Sie Ihre Checkbox in der Bezeichnung wickeln kann:

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

Answer 4

Ronnie ,

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

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

Answer 5

Wrapping mit der Bezeichnung immer noch nicht erlauben ‚überall in der Box‘ klicken - nach wie vor nur über den 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 zweimal effektiv Makeln wird.

Answer 6

Wie @Gatekiller angegeben und andere, die richtige Lösung ist die <Label> Tag.

Click-in-the-Text ist nett, aber es gibt einen anderen Grund, das <Etikett> Tag zu verwenden: Zugänglichkeit. Die Werkzeuge, die sehbehinderte Menschen benutzen, um auf das Internet zuzugreifen, benötigen das <Label> s, um die Bedeutung von Checkboxen und Optionsfeldern auszulesen. Ohne <Label> s müssen sie basierend auf dem umgebenden Text raten, und sie bekommen es oft falsch oder müssen aufgeben.

Es ist sehr frustrierend, mit einem Formular konfrontiert zu werden, das liest "Bitte wählen Sie Ihre Versandart, radio-button1, radio-button2, radio-button3".

Beachten Sie, dass Web-Accessibility ein komplexes Thema ist; <Label> s sind ein notwendiger Schritt, aber sie reichen nicht aus, um die Zugänglichkeit oder die Einhaltung der staatlichen Vorschriften dort zu garantieren, wo sie Anwendung finden.

Answer 7

dies 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, mich pleae corect!

Answer 8

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> 

FIDDLE

oder Sie können auch die für Attribut Label und id Ihrer Checkbox wie unten

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

FIDDLE