toggle checkbox styling jquery

by Marc Baskin

HTML

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

CSS

#onebdrm:checked, #twobdrm:checked {
  background-color: $white;
}

.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;
  width: 170px;
  padding: 5px 8px;
  margin: 5px 0;
  color: $white;
}

JavaScript

$('#onebdrm, #twobdrm').toggle(function() {
  $(this).toggleClass(':checked');
  return false;
});