Jquery - 选中复选框并更改 div 的背景颜色答案

【问题标题】：Jquery - Check a checkbox and change background color of divJquery - 选中复选框并更改 div 的背景颜色
【发布时间】：2013-08-11 11:06:06
【问题描述】：

所以我已经研究了一段时间，但我有点难过。我正在做的是从数据库中提取数据并将其放入 div 行中。我想要做的是让 div “可点击”并在点击时改变背景颜色。我将有一个隐藏的复选框元素，它将被切换。这是到目前为止我能找到的可以帮助我的代码。

我需要做的是弄清楚在哪里添加一个函数来切换类，无论复选框是否被选中。

jQuery

$('.item').click(function(){
     $('.item').toggle(
         function(event) {
            $(this).find('input').attr('checked', true);
         },
         function(event) {
            $(this).find('input').attr('checked', false);
         }
     );
});

HTML

<div class="item">
   stuff here 
   <input type="checkbox" class="hidden" name="item1" value"true">
</div>

<div class="item">
   stuff here 
   <input type="checkbox" class="hidden" name="item2" value"true">
</div>

【问题讨论】：

...这是否有效？
从 jQuery 1.7 开始，所有布尔属性的正确方法是 .prop() 而不是 .attr()。
请提供一些 HTML 标记以进一步澄清您的问题。
@DevlshOne 实际上从 1.6 开始。而.prop() 不仅适用于“布尔”，还适用于所有 DOM 元素属性。 @OP 这个帖子会让你更深入地了解何时使用prop 和attr：stackoverflow.com/questions/5874652/prop-vs-attr

标签： jquery

【解决方案1】：

试试

$('.item').click(function(){
     var $this = $(this), $chk = $this.find('input:checkbox'), checked = $chk.is(':checked');
     $chk.prop('checked', !checked);
     $this.toggleClass('checked', !checked);
});

演示：Fiddle

【讨论】：

这是有效的，我忘记了一些基本的东西。非常感谢！