Is it possible to use jQuery filter() with a specific checkbox state?
1
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.
javascript jquery
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
add a comment |
1
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.
javascript jquery
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
And the problem is?
– Andreas
Nov 23 '18 at 14:31
add a comment |
1
1
1
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.
javascript jquery
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
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.
javascript jquery
javascript jquery
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
edited Nov 23 '18 at 14:47
Rory McCrossan
241k29206245
241k29206245
asked Nov 23 '18 at 14:28
Beaniie
6111923
asked Nov 23 '18 at 14:28
Beaniie
6111923
asked Nov 23 '18 at 14:28
Beaniie
6111923
6111923
And the problem is?
– Andreas
Nov 23 '18 at 14:31
add a comment |
And the problem is?
– Andreas
Nov 23 '18 at 14:31
And the problem is?
– Andreas
Nov 23 '18 at 14:31
And the problem is?
– Andreas
Nov 23 '18 at 14:31
add a comment |
2 Answers
2
active
oldest
votes
1
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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
add a comment |
1
First You need to execute :
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
when one of thoses checkbox is changed.
you can use on('change') event like :
$(".form-checkbox").on('change',function() {
// example
if ($(this).is(':checked')) {
// this OR target
$(this).addClass("sub-green");
} else {
// this OR target
$(this).removeClass('sub-green');
}
// or
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
})
answered Nov 23 '18 at 14:35
El Alami Anas
955416
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448516%2fis-it-possible-to-use-jquery-filter-with-a-specific-checkbox-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
add a comment |
1
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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
add a comment |
1
1
1
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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>// 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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>// 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;
}<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<section id="newsletter" class="sec-spacer-xl bg-primary">
<div class="<?php echo esc_attr( $container ); ?>">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form>
<label for="newsletter-email" class="form-hidden">Please enter your email address:</label>
<div class="input-group input-group-lg">
<input type="email" class="form-control form-element" placeholder="john.smith@example.co.uk" aria-label="Email Address" aria-describedby="subscribe-collapse" id="newsletter-email">
<div class="input-group-append">
<button class="btn btn-nl-collapse" type="button" data-toggle="collapse" data-target="#gdpr-info-pane" aria-expanded="false" aria-controls="gdpr-info-pane" id="subscribe-collapse"><i class="fab fa-telegram-plane"></i></button>
</div>
</div>
<div class="collapse" id="gdpr-info-pane">
<div class="card card-body">
<h5>Almost there, we just need to confirm a few extra details...</h5>
<p>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. </p>
<p>
<strong>How you would like to hear from us?</strong>
</p>
<label class="checkbox subfield" for="gdpr_8861">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8861" name="gdpr[8861]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Emails & Updates" aria-label="email-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8865">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8865" name="gdpr[8865]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Direct Mail" aria-label="direct-mail-text" disabled>
</div>
</label>
<label class="checkbox subfield" for="gdpr_8869">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input" id="gdpr_8869" name="gdpr[8869]" value="Y" class="av-checkbox form-checkbox">
</div>
</div>
<input type="text" class="form-control check-input" placeholder="Online Advertising" aria-label="online-advertising-text" disabled>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
</div>
</section>answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
edited Nov 23 '18 at 14:42
answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
answered Nov 23 '18 at 14:34
Rory McCrossan
241k29206245
241k29206245
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
add a comment |
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Just to clarify, could I use filter if I wanted to or would that be a bad choice?
– Beaniie
Nov 23 '18 at 14:43
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
Ultimately this a clean example, exactly what I was looking for. Thanks for the assist?
– Beaniie
Nov 23 '18 at 14:44
1
1
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
You could but it would be a bad choice in this scenario, as your current logic adds the class on the first click (to check the box) then leaves it on when the checkbox is clicked again, then removes it on the next click. You would need to change the logic around to several lines to check the current state and remove it as well, which this does all in a single line.
– Rory McCrossan
Nov 23 '18 at 14:44
add a comment |
1
First You need to execute :
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
when one of thoses checkbox is changed.
you can use on('change') event like :
$(".form-checkbox").on('change',function() {
// example
if ($(this).is(':checked')) {
// this OR target
$(this).addClass("sub-green");
} else {
// this OR target
$(this).removeClass('sub-green');
}
// or
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
})
answered Nov 23 '18 at 14:35
El Alami Anas
955416
add a comment |
1
First You need to execute :
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
when one of thoses checkbox is changed.
you can use on('change') event like :
$(".form-checkbox").on('change',function() {
// example
if ($(this).is(':checked')) {
// this OR target
$(this).addClass("sub-green");
} else {
// this OR target
$(this).removeClass('sub-green');
}
// or
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
})
answered Nov 23 '18 at 14:35
El Alami Anas
955416
add a comment |
1
1
1
First You need to execute :
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
when one of thoses checkbox is changed.
you can use on('change') event like :
$(".form-checkbox").on('change',function() {
// example
if ($(this).is(':checked')) {
// this OR target
$(this).addClass("sub-green");
} else {
// this OR target
$(this).removeClass('sub-green');
}
// or
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
})
answered Nov 23 '18 at 14:35
El Alami Anas
955416
First You need to execute :
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
when one of thoses checkbox is changed.
you can use on('change') event like :
$(".form-checkbox").on('change',function() {
// example
if ($(this).is(':checked')) {
// this OR target
$(this).addClass("sub-green");
} else {
// this OR target
$(this).removeClass('sub-green');
}
// or
$('.form-checkbox').filter(function () {
return ($(this).is(':checked'))
}).toggleClass("sub-green");
})
answered Nov 23 '18 at 14:35
El Alami Anas
955416
answered Nov 23 '18 at 14:35
El Alami Anas
955416
answered Nov 23 '18 at 14:35
El Alami Anas
955416
answered Nov 23 '18 at 14:35
El Alami Anas
955416
955416
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448516%2fis-it-possible-to-use-jquery-filter-with-a-specific-checkbox-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
And the problem is?
– Andreas
Nov 23 '18 at 14:31