Toggle checkbox css styling using jQuery

Question

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>

Most user agents don't allow styling to that aspect of the checkbox. — Scott Marcus
– Scott Marcus, Commented Jan 24, 2018 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
– Marc, Commented Jan 24, 2018 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
– webnoob, Commented Jan 24, 2018 at 22:55
makes sense. Based on my response, can we also remove the [duplicate] flag? — Marc
– Marc, Commented Jan 24, 2018 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
– Scott Marcus, Commented Jan 24, 2018 at 23:27

danny.hu · Accepted Answer · 2018-01-25 01:49:52Z

0

like this:

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

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

answered Jan 25, 2018 at 1:49

danny.hu

1103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marc Over a year ago

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.

Collectives™ on Stack Overflow

Toggle checkbox css styling using jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related