Question

为什么这不能正确切换？

$('#violation_form label').click(function() {
    //alert($(this).parent().prev().html());
    var $checkbox = $(this).closest('li').find('input[type="checkbox"]');
    console.log(!$checkbox.attr('checked'));
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

http://jsfiddle.net/SEkTp/2/

Answer 1

您滥用<label>元素。当你可以直接进行点击时，点击它会影响相应的<input>是没有意义的。引用文档（MDN）：

HTML <label>元素表示用户中项目的标题接口。它可以通过放置控件与控件相关联标签元素中的控制元素，或使用for 属性。这种控制称为标签的标记控制 元件。

所以......

<label><input type="checkbox" />Whatever</label>

......而且，更复杂，但更灵活：

<input type="checkbox" name="some_checkbox" id="some_checkbox" />
<label for="some_checkbox">Whatever it is</label>

......会奏效。

Demo。

Answer 2

DOM中没有li个元素。同时使用prop打开/关闭复选框。试试这个：

    $('#violation_form label').click(function() {
    $checkbox = $(this).closest('form').find('input[type="checkbox"]');
    console.log(!$checkbox.attr('checked'));
    $checkbox.prop("checked", !$checkbox.prop("checked"));
});

<强> Working Demo

Answer 3

您可以使用 .prop() 代替.attr()来设置复选框的选中状态：

$checkbox.prop('checked', !$checkbox.prop('checked'));

最终代码如下：

$('#violation_form label').click(function () {
    //alert($(this).parent().prev().html());
    var $checkbox = $(this).closest('li').find('input[type="checkbox"]');
    console.log(!$checkbox.prop('checked'));
    $checkbox.prop('checked', !$checkbox.prop('checked'));
});

Updated Fiddle

Answer 4

也许你想要这个=＆gt; http://jsfiddle.net/SEkTp/14/

jQuery('#violation_form label').click(function() {
   // alert("hi");
    //alert($(this).parent().prev().html());
    var checkbox = jQuery(this).find('input[type="checkbox"]');
    console.log(!checkbox.attr('checked'));
    checkbox.attr('checked', !checkbox.attr('checked'));
});

Answer 5

检查一下，你错过了那个结构中的<li>。现在它工作正常

Demo

这不能正确切换

5 个答案: