如果CheckBox位于具有click事件的div中,则单击CheckBox不起作用

Question

我有一种情况,复选框检查事件不起作用.我已将复选框放在具有click事件的div中,然后检查/取消选中复选框.

<div onclick="checkCheckBox('ch_0')">
    <input type='checkbox' value='20' id='ch_0'/>
</div>

并编写如下脚本

 function checkCheckBox(checkboxId)
 {
     var checkBoxes = $("#" + checkboxId);
        checkBoxes.attr("checked", !checkBoxes.attr("checked"));
        if (checkBoxes.attr("checked") == true) {
            $(this).addClass('selected');
        }
        else {
            $(this).removeClass('selected');
        }
 }

Answer 1

这种行为正是该label元素的用途; 没有必要使用javascript:

<label>
    <input type='checkbox' value='20' id='ch_0'/>
     Foo Bar Checkbox
</label>

如果你检查这个小提琴,你会看到复选框的命中区域是整个label元素,它被扩展为包含文本.