html - titel - wordpress title tag ändern




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

Checkboxes in HTML Formularen enthalten keine impliziten Beschriftungen . Durch das Hinzufügen einer expliziten Beschriftung (ein wenig Text) wird das checkbox nicht checkbox .

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


Legen Sie die CSS- display für das Label als Blockelement fest, und verwenden Sie dieses anstelle Ihres div - es behält die semantische Bedeutung eines Labels bei und lässt das gewünschte Styling zu.

Beispielsweise:

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


Ronnie,

Wenn Sie den Beschriftungstext und das Kontrollkästchen innerhalb eines Wrapperelements einschließen möchten, können Sie Folgendes tun:

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

Sie müssen nur das Kontrollkästchen in label-Tag genau so umbrechen

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

FIDDLE

oder Sie können auch das for- Attribut von label und id Ihrer Checkbox wie unten verwenden

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

FIDDLE


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

Das for- Attribut des label-Elements verweist auf das id- Attribut des Eingabeelements, und der Browser erledigt den Rest.

Dies wurde getestet um zu arbeiten in:

  • IE6
  • IE7
  • Feuerfuchs

Wrapping mit dem Label lässt immer noch nicht "irgendwo in der Box" klicken - nur noch auf den Text! Das macht die Arbeit 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 viel Javascript, das effektiv zweimal umschaltet.


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 nicht tut, pleae cortect mich!





checkbox