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

body { background-color: blue;}


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

JavaScript

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