Styling a checkbox using jQuery

Design help Custom code
1

I am am trying to have a form that has some checkboxes to select several services. I’m trying to add style the checkboxes when they are checked (add a background color and change the color of the label and icon from black to white) but the jQuery code that I implemented isn’t cutting it. This is what I have so far:

<script>
$('.checkbox-wrapper').on('click', function() {
    if (!$(this).find('.checkbox-button').is(':checked') {
        $(this).removeClass('active');
        $(this).find('.checkbox-label').removeClass('active');
        $(this).find('.checkbox-icon').removeClass('active');
    } 
    else {
        $(this).addClass('active');
        $(this).find('.checkbox-label').addClass('active');
        $(this).find('.checkbox-icon').addClass('active');
    }
});
</script>

This post got me pretty far, but I can’t seem to figure out the rest.

Here is my site Read-Only: https://preview.webflow.com/preview/avox?utm_medium=preview_link&utm_source=designer&utm_content=avox&preview=8329a74bcd9c8fc15e33b8ccc63f8066&pageId=6111a9e13dd3cb0463cdcd71&workflow=preview

3

I found a solution using ‘change’ instead of ‘click’ and toggleClass instead of addClass. Here is the code that worked for me:

<script>
$('.checkbox-wrapper').on('change', function() {
  $(this).toggleClass('active');
  $(this).find('.checkbox-icon').toggleClass('active');
  $(this).find('.checkbox-label').toggleClass('active');
});
</script>
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.