Toggle styles on checkbox checked - html

Question

So, I've been stuck at this for a couple of hours. I'm essentially trying to get a checkbox to work as a toggle button. I want the styles applied by jquery to be only applied when it's checked and back to it's initial if it has been deselected.
The HTML markup:
<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
<div class="input boolean optional mailing_list_form_opt_in">
<input name="mailing_list_form[opt_in]" type="hidden" value="0">
<label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
<input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
Yes, I would like to join the mailing list.
</label>
</div>
The SCSS:
#new_mailing_list_form {
.opt {
color: $white;
background-color: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
}
.checkbox {
margin: 0px;
padding: 0px;
}
div label input {
margin-right:100px;
}
.mailing_list_form_opt_in label {
cursor: pointer;
background: transparent;
border: 2px solid $selectiveYellow;
border-radius:2px;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow:auto;
margin:4px;
padding: 8px 15px;
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
.mailing_list_form_opt_in label {
display:block;
}
.mailing_list_form_opt_in label input {
display: none;
}
.mailing_list_form_opt_in input:checked {
background-color:$selectiveYellow;
color:$white;
}
}
JQuery:
$('#mailing_list_form_opt_in').change(function () {
$(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});
I've tried using a conditional statement as well, but I start to descend into spaghetti JQuery which doesn't even work.
Work on it so far: Working CodePen link

Answer 1

You could use jQuery's toggleClass() method to change the background whenever a user clicks the element.
$("#checkbox_elem").on( "click", function(){
$(this).toggleClass( 'background-class' );
});
Now all you have to do is have a default style on the element, and place the new CSS rules into the background-class class definition. Clicking the element will toggle the class on the element.
You could use an explicit check on the element if you want to add some more functionality:
$("#checkbox_elem").on( "click", function(){
if ( $(this).is(':checked') ){
// the checkbox is marked as "checked"
// here you can manipulate the style accordingly
}else{
// the checkbox is NOT marked as "checked"
// here you can manipulate the style accordingly
}
});

Answer 2

So, I'm sharing my pure HTML5/CSS3 solution (which doesn't use any JS/JQuery!) to this problem so that it could be helpful for others stuck on something similar.
I refactored my markup as follows,
HTML:
<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>
and for the styles, I used the adjacent selector + & the pseudo class :checked to show the behavior on that state. The corresponding styles for that are as follows,
SCSS:
input[type=checkbox] + label {
background: transparent;
border: 2px solid $selectiveYellow;
border-radius: 2px;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow: auto;
margin: 4px;
padding: 8px 15px;
#include transition( 0.25s linear);
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
input[type=checkbox]:checked + label {
background: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
color: $white;
}
input[type=checkbox] {
display: none;
}
Works perfectly, added a Codepen so that you can check that out as well! Hope this helps others! :D