Kann Kontrollkästchen beim Klicken auf li überprüfen

Question

Ich versuche, ein Kontrollkästchen zu aktivieren, indem Sie auf eine li klicken. Das Problem ist, wird das Kontrollkästchen aktiviert, nur wenn jemand klickt auf den label, nicht die vollen li (dies ist, weil die Breite der li länger ist als die label!

<ul> 
    <li><input id="a1" type="checkbox"><label for="a1">1</label></li> 
    <li><input id="a2" type="checkbox"><label for="a2">2</label></li> 
    <li><input id="a3" type="checkbox"><label for="a3">3</label></li> 
</ul> 

Ich habe versucht, dieses Problem zu lösen mit die Javascript unten, überprüft es jedoch nach wie vor nur das Kontrollkästchen, wenn die label geklickt wird

$("li").click(function(e) { 
    var checked = !$(this).children("input").first().prop("checked"); 
    $(this).children("input").first().prop("checked", checked); 
    $(this).toggleClass("selected", checked); 
}); 

. Hinweis:. wenn möglich, ich möchte Javascript und JQuery vermeiden

Answer 1

Sie benötigen kein Skript. Sie können das Kontrollkästchen und alle li Inhalt mit der label umhüllen. Geben Sie das Label display:block so wird es „nehmen“ die volle Breite des li, auf diese Weise die li wird anklickbare (wie, nicht wirklich)

label { 
 
    display:block; 
 
}

<ul> 
 
    <li><label for="a1"><input id="a1" type="checkbox">1</label></li> 
 
    <li><label for="a2"><input id="a2" type="checkbox">2</label></li> 
 
    <li><label for="a3"><input id="a3" type="checkbox">3</label></li> 
 
</ul>

Answer 2

Genau dies versuchen;

Hinzufügen Klasse = "Myclass" zu ul.

Answer 3

Meine Lösung verwendet direkt JS aber es ist inline in HTML, also nichts zu kompliziert

<li onclick="document.getElementById('a1').checked = !document.getElementById('a1').checked;"> 
    <input id="a1" type="checkbox" onclick="event.stopPropagation();"><label for="a1">1</label> 
</li> 

Siehe hier: https://jsfiddle.net/Delorian/2v47Lwhb/

Answer 4

1. Verwendung Event.preventDefault() auf dem Click-Ereignis des Etiketts.
2. Und dann verwenden Sie die css-Eigenschaft z-index: 2 auf der Checkbox-Eingabe, so dass das Kontrollkästchen oben auf der Etikettenebene ist.