javascript - 未选中 JQuery toggleClass() 复选框

Question

您好，请检查以下代码-

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 将被删除，并且复选框也将被取消选中。

谢谢。

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

Answer 1

试试这个:

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

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