Is it possible to use jQuery filter() with a specific checkbox state?

Question

I've been playing around with Jquery to try and do something cool with bootstraps 4's input groups. The idea is, when a user checks the checkbox the input group housing that element would turn green.

I thought I would be able to use '.filter' helping me keep the code clean, but I'm not sure I'm getting it right. See my snippet below.

$('.form-checkbox').filter(function () {
  return ($(this).is(':checked'))
}).toggleClass("sub-green");

Here's my current attempt JsFiddle. Any help I could get with this would be much appreciated.

Rory McCrossan · Accepted Answer

You have a couple of issues in your logic. Firstly you need to change the class when the checked property of the checkbox changes. To do that execute your code in a change event handler.

Secondly you don't need filter(). You instead need to use this to affect the element which raised the event. Then you can provide the checked property to toggleClass() to add or remove the class as needed.

Finally you need to put the class on the parent input-group-text element, not the checkbox itself. To do that use closest(). Try this:

$('.form-checkbox').change(function() {
  $(this).closest('.input-group-text').toggleClass("sub-green", this.checked);
});

// Trigger collapse on enter key down
$("#newsletter-email").keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    $(this).closest("div").find("#subscribe-collapse").trigger('click');
    return false;
  }
});

$(".btn-nl-collapse").click(function() {
  $(this).toggleClass("sub-black");
});

// Checkbox Styling

$('.form-checkbox').change(function() {
  $(this).closest('.input-group-text').toggleClass("sub-green", this.checked);
});

* {
  border-radius: 0 !important;
}

.bg-primary {
  background-color: #ededed !important;
}

.sec-spacer-xl {
  padding: 8rem;
}


/* == Additional Styles == */


/* ======================= */

.body-link-external::after {
  content: "\f08e";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-left: 3px;
}

.disclaimer {
  font-size: .7rem;
}


/* == form styles == */


/* ================= */

.form-hidden {
  display: none;
}

label {
  margin: 0;
}

.form-element {
  min-width: 280px;
  border: none;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: ease all .2s;
}

.form-element:focus {
  min-width: 280px;
  border: none;
  background-color: #fefdf3;
  transition: ease all .2s;
  border: 1px solid #ccc;
  box-shadow: none;
  outline: 0 none;
}

.btn-nl-collapse {
  border: 1px solid #ccc;
  background-color: #fff;
  transition: ease all .3s;
}

.btn-nl-collapse:hover,
.btn-nl-collapse.sub-black {
  border: 1px solid #222;
  background-color: #222;
  color: #fff;
  transition: ease all .2s;
}

.btn-nl-collapse:focus {
  border: 1px solid #ccc;
  box-shadow: none;
  outline: 0 none;
}

.form-element::-webkit-input-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:-moz-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element::-moz-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:-ms-input-placeholder {
  color: #777 !important;
  opacity: 1;
  transition: ease all .2s;
}

.form-element:focus::-webkit-input-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus:-moz-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus::-moz-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.form-element:focus:-ms-input-placeholder {
  opacity: 0;
  transition: ease all .2s;
}

.check-input:disabled {
  background-color: #fff;
}

.input-group-text.sub-green {
  background-color: rgba(156, 195, 32, 0.2);
  border: 1px solid @9cc320;
}







  
    
      
        
          Please enter your email address:
          
            
            
              
            
          
          
            
              Almost there, we just need to confirm a few extra details...
              We use Mailchimp as our marketing platform and make use of thier tools to securely maintain and handle our subscribers data. Your data will never be shared with third parties and we will never send you spam. 
              
                How you would like to hear from us?

Is it possible to use jQuery filter() with a specific checkbox state?

Answers (2)

Related Questions