jquery - 如果复选框位于具有单击事件的 div 内，则单击不起作用

Question

我遇到了复选框检查事件不起作用的情况。我已将复选框放置在具有单击事件的 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>

如果您 checkin this fiddle 您将看到复选框的点击区域是整个 label 元素，该元素已展开以包含文本。