javascript - 使用 jQuery 切换复选框 css 样式

Question

我创建了一个由复选框控制的过滤器并使用 jQuery 我已经 1) 删除了原始复选框 ...$('.toggle_bdrms input:checkbox').css('display', 'none');..并使用 CSS 为复选框标签提供方形按钮的外观。

现在我想使用 jQuery 切换复选框样式以填充背景颜色为白色的框。我已经成功地使用 jQuery 来改变标签背景，但是 toggle() 函数没有做我想要的，即在单击标签时将背景颜色从无切换为白色再返回。

在此先感谢您提供的任何指导/帮助。

https://jsfiddle.net/baskinco/e7utzowb/3/

$('.toggle_bdrms input').toggle(function() {
  $('.toggle_bdrms input:checkbox').css('display', 'none');
  $('.toggle_bdrms label').css({'background-color':'#FFFFFF', 'color':'#00a9b7'});
});

.toggle_bdrms > * {
  float: left;
}

.toggle_bdrms input[type=checkbox]{
  display: none;
}

.toggle_bdrms label{
  display: block;
  text-align: center;
  letter-spacing: .15em;
  border: 1px solid $white;
  background-color: none;
  width: 170px;
  padding: 5px 8px;
  margin: 5px 0;
  color: $white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <form name="filter" method="post" action="" id="slidefilter">
    <div class="toggle_bdrms">
      <input id="onebdrm" type="checkbox" value="onebdrm">
      <input id="twobdrm" type="checkbox" value="twobdrm">
      <label for="onebdrm">ONE BEDROOM</label>
      <label for="twobdrm">TWO BEDROOM</label>
    </div>
  </form>
</div>

Answer 1

像这样:

$('#onebdrm, #twobdrm').toggle(function() {
    var $this = $(this);
    var checked = $this.prop('checked');

    $this.prop('checked', !checked);
    return false;
});