使用jQuery

Question

我创建了一个由复选框控制的过滤器并使用jQuery我已经删除了原始复选框... $（＆＃39; .toggle_bdrms输入：复选框＆＃39;）。css（＆＃39;显示＆＃39;，＆＃39;无＆＃39;）; ..并使用CSS给复选框标签方形按钮的外观。

现在，我想使用jQuery切换复选框样式，以填充背景颜色的框：白色。我成功地使用jQuery来改变标签背景，但是toggle（）函数并没有做我想要的事情，即在单击标签时将背景颜色从无切换到白色并返回。

提前感谢任何指导/协助。

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

像这样：

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

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