チェックボックスのデフォルト機能が失われています

Question

私はリストを持っています。その中に私はいくつかのチェックボックスを持っています。私は2つの異なる方法でチェックボックスをチェックしようとしています。 1つはデフォルトの方法で、もう1つは 'li'をクリックするときです。コードへのリンクはhere

です。私がliをクリックすると、チェックボックスは正しくチェックされますが、チェックボックス自体をクリックすると、それは表示されません。何が問題なの？

Answer 1

これは、クリックイベントのターゲットを確認することで解決できます。 li要素でない場合は、コードを実行しないでください。

$("#divclass li").click(function(e){ 
    if(e.target.nodeName == "LI") { 
     //Your code 
    } 
}); 

は、例えば、このupdated fiddleを参照してください。

Answer 2

jsの代わりにlabelを使用できます。 参照here

<div class="divclass" id="divclass"> 
    <ul> 
     <li><label><input type="checkbox" name="checkclass" class="checkclass" value="1" />Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</label></li> 
     <li><label><input type="checkbox" name="checkclass" class="checkclass" value="2" />Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label></li> 
     <li><label><input type="checkbox" name="checkclass" class="checkclass" value="3" />Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</label></li> 
     <li><label><input type="checkbox" name="checkclass" class="checkclass" value="4" />Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</label></li> 
    </ul> 
</div>