0

I've created a filter controlled with checkboxes and using jQuery I've 1) removed the original checkboxes ... $('.toggle_bdrms input:checkbox').css('display', 'none'); ..and used CSS to give the checkbox labels the look of square buttons.

Now I'd like to toggle the checkbox styling using jQuery to fill in the boxes with background-color: white. I've succeeded in using jQuery to get the label background to change, but the toggle() function isn't doing what I want, namely toggle the background color from none to white and back when the label is clicked.

Thanks in advance for any guidance/assistance.

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>
VXp
  • 11,598
  • 6
  • 31
  • 46
Marc
  • 35
  • 6
  • Most user agents don't allow styling to that aspect of the checkbox. – Scott Marcus Jan 24 '18 at 22:17
  • I'm sure I understand how the article you linked to is a duplicate. I already know how to style checkboxes using css, what im having an issue with is how to modify that styling with jQuery, which isn't mentioned in the attached article. You also removed the link to my jfiddle ... are jfiddle links no longer allowed? thanks! – Marc Jan 24 '18 at 22:39
  • Re: jsfiddle. It's preferred to use SO's snippets to provide code as it maintains the content should something happen to the fiddle further down the line. – webnoob Jan 24 '18 at 22:55
  • makes sense. Based on my response, can we also remove the [duplicate] flag? – Marc Jan 24 '18 at 23:12
  • The duplicate I linked to explains that styling the background of checkboxes isn't something that you can do, hence my comment and my closing of the question. – Scott Marcus Jan 24 '18 at 23:27
  • styled the label of the checkbox (vs the checkbox itself) to act as a button .. working, but still wont toggle background with jQuery. – Marc Jan 25 '18 at 23:27

1 Answers1

0

like this:

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

    $this.prop('checked', !checked);
    return false;
});
danny.hu
  • 110
  • 3
  • Hey danny.hu, thanks. However, I don't need the checkboxes checked, I actually want to keep those hidden (as in my js). i'm trying to change the background color of the box when the box is clicked. Im using the checkbox function to control a filter (js not included in this post), but I need them styled as buttons that toggle from no background to a white background on click. – Marc Jan 26 '18 at 15:48