Question

我的HTML代码：

<ul id="filter">
<label><li><input type="checkbox" data="rady-a-tipy" id="checkbox">Rady a tipy</input></li></label>
<label><li><input type="checkbox" data="osobni-rozvoj" id="checkbox">Osobní rozvoj</input></li></label>
<label><li><input type="checkbox" data="rozhovory" id="checkbox">Rozhovory</input></li></label>
</ul>

然后我有了这个代码，第一部分是限制复选框检查，这样用户一次只能检查一个“过滤器”。第二部分正在改变

利

单击

背景颜色以显示已选择过滤器。

// Checkbox limit
$(function() { 
  $('input[type="checkbox"]').bind('click',function() {
    $('input[type="checkbox"]').not(this).prop("checked", false);
  });
});
// Background-color on parent change
$("input[type='checkbox']").on('click', function(){
    $('#filter li').removeClass('bgc');
    $(this).parent().addClass('bgc');
});

问题是..我需要再做一件事，那就是如果我再次点击突出显示的过滤器（取消选中），我希望从中删除类bgc。现在，如果我再次单击突出显示的过滤器，它将取消选中它，但背景会保留在那里。

这全部连接到其他脚本文件，该文件检查是否选中了其中任何一个复选框，并根据选中的“数据”值查询帖子。一切正常我只需要一件小事。

Answer 1

使用：

$("input[type='checkbox']").on('click', function(){
   $('#filter li').not($(this).parent()).removeClass('bgc');
   $(this).parent().toggleClass('bgc');
});

带有li元素的复选框过滤器

1 个答案: