这不能正确切换[重复]

Posted 2023-03-05

【中文标题】这不能正确切换[重复]

【英文标题】：This does not toggle correctly [duplicate]

【发布时间】：2014-05-10 10:54:08

【问题描述】：

为什么不能正确切换？

$('#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/

【问题讨论】：

html 中没有 li - 也使用 .prop() 而不是 .attr()

见jsfiddle.net/arunpjohny/BE9z3/1

这里没有 LI，jQuery 没有定义，prop 比 attr 这里好...真的，为什么急着发这么多问题？

我的好先生，请您再次查看链接。我已经纠正了以前的畸形

@GeorgeNewton 因为您需要使用 .prop() 插入 .attr() - 请参阅我在上面发布的小提琴

【参考方案1】：

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

【讨论】：

为什么使用 prop 而不是 attr？

@GeorgeNewton：见***.com/a/5876747/1719752

【参考方案2】：

您可以使用 .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

【参考方案3】：

也许你想要这个 => 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'));
);

【参考方案4】：

您误用了<label> 元素。当你可以直接点击它时，没有必要做魔术来让点击它影响相应的<input>。引用文档 (MDN)：

HTML <label> 元素 表示用户中项目的标题 界面。它可以与控件相关联，方法是放置 标签元素内的控制元素，或使用for 属性。这样的控件称为标签的labeled control 元素。

所以两者都...

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

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

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

...会起作用的。

Demo。

【讨论】：

天哪，是的，这太简单了！

没有意识到您可以将标签包裹在元素周围并放弃使用for，这样可以可靠地工作吗？我看过的任何文档都没有提到这样做。

@MLeFevre 为什么，我认为这是一个众所周知的功能。不过，刚刚添加了来自 MDN 的报价。 )

【参考方案5】：

检查这个，你在那个结构中错过了<li>。现在一切正常

Demo