未选中 JQuery toggleClass() 复选框答案

【问题标题】：JQuery toggleClass() checkbox unchecked未选中 JQuery toggleClass() 复选框
【发布时间】：2015-05-20 07:28:06
【问题描述】：

您好，请检查以下代码 -

HTML

<div class="manage-user-freind" style="line-height:18px; cursor:pointer;">
  <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="10" />pieter
  </span>
</div>

<div class="manage-user-freind" style="line-height:18px; cursor:pointer;">
  <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="12" />john
  </span>
</div>

JQuery

$('.manage-user-freind').click(function(){
     $(this).toggleClass('clicked',function(){
            $('.chk').prop('checked', true);
     });
});

CSS

.clicked {
  background-color: yellow;
}

我使用了 toggleClass() 函数。 toggleClass 工作正常，但所有单击的复选框也没有取消选中当前复选框。

我需要在单击任何 div 时首先以黄色显示该 div 并选中当前复选框。再次单击该黄色 div 将删除，并且复选框也将取消选中。

谢谢。

对不起，我的英文措辞。 :(

【问题讨论】：

标签： javascript jquery html css checkbox

【解决方案1】：

试试这个：

$('.manage-user-freind').on('click', function() {
    $(this).toggleClass('clicked').find('.chk').prop('checked', $(this).hasClass('clicked'));
});

演示：https://jsfiddle.net/tusharj/d84z5vub/1/

【讨论】：

感谢您的精彩回答 :)

【解决方案2】：

$.toggleClass 没有回调函数。它不是异步函数，因此您可以将$('.chk').prop('checked', true); 移动到切换类的下一条语句：

$(this).toggleClass('clicked');
$('.chk').prop('checked', true);

【讨论】：

这不会切换checkbox的状态
@Tushar 是的，因为 OP 总是将复选框设置为选中状态，而不是切换它。

【解决方案3】：

要选中和取消选中，这段代码应该可以工作：

$('.manage-user-freind').click(function(){
     $(this).toggleClass('clicked');
     var checkbox = $(this).find('.chk');
     checkbox.prop('checked', !checkbox.prop("checked"));
});

这是Fiddle.

【讨论】：

【解决方案4】：

据此：jquery function on toggleClass complete?

您可以使用前提等到课程更改

$(this).toggleClass('clicked').promise().done(function(){
    alert('a');
});

【讨论】：