チェックボックスのラベルが効かない

Question

私は、クラス内の垂直オプションを持つPの中にチェックボックスを持っています。

$(".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); 
     } 
    } 
}); 

が、チェックボックスのラベルに、このロジッククリックでは動作しません：私もP.にコードをクリックの上、チェックボックスの機能を実装するためのスクリプトを書かれているです。私は間違って何をしていますか？

Answer 1

この目的でlabelタグを使用する必要があります。 for属性のターゲットチェックボックスのIDをlabelタグに書き込みます。

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

あなたが他のタグのためのjQueryを使用して、この仕事をしたい場合は、例を参照してください

$("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>