Klicken Sie auf das Kontrollkästchen Etikett funktioniert nicht

Question

Ich habe ein Kontrollkästchen in einem P mit Klasse vertikale Optionen. Ich habe Skript geschrieben Checkbox Funktionalität zu implementieren, auch die P. Der Code auf einem Klick ist:

$(".vertical-options,.horizontal-options").click(function(event){ 
    var input = $(this).find('input').first(); 
    console.log(input); 
    if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) { 
     if(input.is(':checked')){ 
      input.prop('checked', false); 
     } else { 
      input.prop('checked', true); 
     } 
    } 
}); 

aber mit dieser Logik Klick auf die Checkbox Etikett funktioniert nicht. Was mache ich falsch?

Answer 1

Sie müssen label Tag für diesen Zweck verwenden. Schreibe ID des Ziel-Kontrollkästchens in for Attribut von label Tag.

<label for="id1">Checkbox-1</label> 
 
<input type="checkbox" id="id1" /> 
 

 
<label for="id2">Checkbox-2</label> 
 
<input type="checkbox" id="id2" /> 
 

 
<label for="id3">Checkbox-3</label> 
 
<input type="checkbox" id="id3" />

Wenn Sie diese Arbeit mit Jquery für anderen Tag tun wollen, siehe Beispiel

$("p").on("click", function(e){ 
 
    var checkbox = $(this).find(':checkbox'); 
 
    if ($(this).is(e.target)) \t 
 
     checkbox.prop('checked', !checkbox.is(':checked')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    Checkbox-1 
 
    <input type="checkbox" /> 
 
</p> 
 
<p> 
 
    Checkbox-2 
 
    <input type="checkbox" /> 
 
</p> 
 
<p> 
 
    Checkbox-3 
 
    <input type="checkbox" /> 
 
</p>