复选框丢失其默认功能

时间:2011-06-17 14:16:41

标签: jquery html

我有一份清单。我有一些复选框。我试图以两种不同的方式检查复选框。一种是默认方式,另一种是当我点击'li'时。代码链接为here

当我点击li时,复选框会正确检查,但是当我单击复选框本身时,它不会。可能是什么问题?

2 个答案:

答案 0 :(得分:1)

您可以通过检查点击事件的目标来解决此问题。如果它不是li元素,请不要运行您的代码。

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

有关示例,请参阅此updated fiddle

答案 1 :(得分:1)

您可以使用label而不是js。 见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>