Jquery if checkbox is checked add a class
10
I am trying to add a class when a checkbox is checked.
My jquery:
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
jquery
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
add a comment |
10
I am trying to add a class when a checkbox is checked.
My jquery:
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
jquery
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
add a comment |
10
10
10
2
I am trying to add a class when a checkbox is checked.
My jquery:
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
jquery
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
I am trying to add a class when a checkbox is checked.
My jquery:
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
jquery
jquery
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
asked Aug 1 '11 at 14:26
Rails beginner
6,04125112235
6,04125112235
add a comment |
add a comment |
7 Answers
7
active
oldest
votes
15
You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..
answered Aug 1 '11 at 14:29
betamax
6,28883053
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
add a comment |
4
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
this will add the "selected" class into the label tag()
//css
.selected {
background:gray
}
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
add a comment |
2
Try this:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use.trigger()to force the change or handle it correctly server side.
– Ben Everard
Aug 1 '11 at 14:35
add a comment |
1
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
add a comment |
1
I'm making the assumption you'll want to toggle the class with the checkbox.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if( $this.is(':checked') )
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.
Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
This isn't right, he doesn't want to add the class to the checkbox, instead to thediv.menuitem
– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turndiv.menuitemintodiv.menuitemshowrather thandiv.menuitem.menuitemshow? I would suggest toggling the classshowso thatdiv.menuitemturns intodiv.menuitem.showit's much more modular that way.
– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call tochange()does.
– zzzzBov
Aug 1 '11 at 16:02
|
show 4 more comments
0
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?
answered Apr 26 '15 at 11:09
Amam Dewan
34
add a comment |
0
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
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%2f6899859%2fjquery-if-checkbox-is-checked-add-a-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
15
You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..
answered Aug 1 '11 at 14:29
betamax
6,28883053
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
add a comment |
15
You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..
answered Aug 1 '11 at 14:29
betamax
6,28883053
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
add a comment |
15
15
15
You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..
answered Aug 1 '11 at 14:29
betamax
6,28883053
You should not use $("input") to select a checkbox, input will select all inputs. Instead you can use input:checkbox:
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Basically what this does is execute whatever is inside the function(){} when the checkbox is changed. Then you can just use jQuery is to check if the checkbox is checked or not..
answered Aug 1 '11 at 14:29
betamax
6,28883053
answered Aug 1 '11 at 14:29
betamax
6,28883053
answered Aug 1 '11 at 14:29
betamax
6,28883053
answered Aug 1 '11 at 14:29
betamax
6,28883053
6,28883053
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
add a comment |
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
It does not work, nothing happens
– Rails beginner
Aug 1 '11 at 14:37
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
Ok, can you post the HTML you are using? It's hard to try and diagnose the problem without seeing that too.
– betamax
Aug 1 '11 at 14:39
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
If the accepted answer doesn't work for you, give the solution provided by Dinesh Gunarathne a try.
– HPWD
May 12 '17 at 13:53
add a comment |
4
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
this will add the "selected" class into the label tag()
//css
.selected {
background:gray
}
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
add a comment |
4
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
this will add the "selected" class into the label tag()
//css
.selected {
background:gray
}
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
add a comment |
4
4
4
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
this will add the "selected" class into the label tag()
//css
.selected {
background:gray
}
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
this will add the "selected" class into the label tag()
//css
.selected {
background:gray
}
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
edited Nov 23 '11 at 4:44
animuson♦
42.2k22114130
42.2k22114130
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
answered Oct 21 '11 at 9:41
Dinesh Gunarathne
411
411
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
add a comment |
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
This should be marked the correct answer. The accepted answer adds the class to every div.menuitem whereas this one only adds the class to the parent of the item clicked.
– HPWD
May 11 '17 at 20:06
add a comment |
2
Try this:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use.trigger()to force the change or handle it correctly server side.
– Ben Everard
Aug 1 '11 at 14:35
add a comment |
2
Try this:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use.trigger()to force the change or handle it correctly server side.
– Ben Everard
Aug 1 '11 at 14:35
add a comment |
2
2
2
Try this:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
Try this:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
You cannot have a change event on an attribute, instead check the change event of the checkbox itself and run a condition to see if it's been checked.
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
answered Aug 1 '11 at 14:28
Ben Everard
11k105593
11k105593
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use.trigger()to force the change or handle it correctly server side.
– Ben Everard
Aug 1 '11 at 14:35
add a comment |
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use.trigger()to force the change or handle it correctly server side.
– Ben Everard
Aug 1 '11 at 14:35
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
i'd add else block with removeClass
– heximal
Aug 1 '11 at 14:29
1
1
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
The OP never specified that in the question, so it's best to just fix the problem they're having, they can modify it when they're ready.
– Ben Everard
Aug 1 '11 at 14:30
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
I did $('div.menuitem').removeClass("menuitem")addClass("menuitemshow"); and the class is removed, but on browser refresh the class menuitem is added again although the checkbox is still checked
– Rails beginner
Aug 1 '11 at 14:32
Yes? The changed event fires when you change it, not on load... you could use
.trigger() to force the change or handle it correctly server side.– Ben Everard
Aug 1 '11 at 14:35
Yes? The changed event fires when you change it, not on load... you could use
.trigger() to force the change or handle it correctly server side.– Ben Everard
Aug 1 '11 at 14:35
add a comment |
1
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
add a comment |
1
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
add a comment |
1
1
1
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
$('input:checkbox').change(function () {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
answered Aug 1 '11 at 14:29
Bertrand Marron
15.3k74281
15.3k74281
add a comment |
add a comment |
1
I'm making the assumption you'll want to toggle the class with the checkbox.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if( $this.is(':checked') )
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.
Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
This isn't right, he doesn't want to add the class to the checkbox, instead to thediv.menuitem
– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turndiv.menuitemintodiv.menuitemshowrather thandiv.menuitem.menuitemshow? I would suggest toggling the classshowso thatdiv.menuitemturns intodiv.menuitem.showit's much more modular that way.
– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call tochange()does.
– zzzzBov
Aug 1 '11 at 16:02
|
show 4 more comments
1
I'm making the assumption you'll want to toggle the class with the checkbox.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if( $this.is(':checked') )
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.
Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
This isn't right, he doesn't want to add the class to the checkbox, instead to thediv.menuitem
– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turndiv.menuitemintodiv.menuitemshowrather thandiv.menuitem.menuitemshow? I would suggest toggling the classshowso thatdiv.menuitemturns intodiv.menuitem.showit's much more modular that way.
– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call tochange()does.
– zzzzBov
Aug 1 '11 at 16:02
|
show 4 more comments
1
1
1
I'm making the assumption you'll want to toggle the class with the checkbox.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if( $this.is(':checked') )
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.
Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
I'm making the assumption you'll want to toggle the class with the checkbox.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if( $this.is(':checked') )
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
I've updated this to be a suggested solution @Rails beginner's issue given the comments I've read so far.
Note the addition of change() on the last line. This is to force change to execute immediately on page load (I'm assuming $('input') waits for document.ready or is after the input:checkbox is created).
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
edited Aug 1 '11 at 14:43
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
answered Aug 1 '11 at 14:29
zzzzBov
130k33261305
130k33261305
This isn't right, he doesn't want to add the class to the checkbox, instead to thediv.menuitem
– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turndiv.menuitemintodiv.menuitemshowrather thandiv.menuitem.menuitemshow? I would suggest toggling the classshowso thatdiv.menuitemturns intodiv.menuitem.showit's much more modular that way.
– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call tochange()does.
– zzzzBov
Aug 1 '11 at 16:02
|
show 4 more comments
This isn't right, he doesn't want to add the class to the checkbox, instead to thediv.menuitem
– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turndiv.menuitemintodiv.menuitemshowrather thandiv.menuitem.menuitemshow? I would suggest toggling the classshowso thatdiv.menuitemturns intodiv.menuitem.showit's much more modular that way.
– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call tochange()does.
– zzzzBov
Aug 1 '11 at 16:02
This isn't right, he doesn't want to add the class to the checkbox, instead to the
div.menuitem– Ben Everard
Aug 1 '11 at 14:29
This isn't right, he doesn't want to add the class to the checkbox, instead to the
div.menuitem– Ben Everard
Aug 1 '11 at 14:29
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
I want to change the class on the div when the checkbox is checked
– Rails beginner
Aug 1 '11 at 14:40
@Rails beginner, you want to turn
div.menuitem into div.menuitemshow rather than div.menuitem.menuitemshow? I would suggest toggling the class show so that div.menuitem turns into div.menuitem.show it's much more modular that way.– zzzzBov
Aug 1 '11 at 14:42
@Rails beginner, you want to turn
div.menuitem into div.menuitemshow rather than div.menuitem.menuitemshow? I would suggest toggling the class show so that div.menuitem turns into div.menuitem.show it's much more modular that way.– zzzzBov
Aug 1 '11 at 14:42
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
Yes what about when browser refresh would a checked checkbox still have the class div.menuitem.show ?
– Rails beginner
Aug 1 '11 at 15:04
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call to
change() does.– zzzzBov
Aug 1 '11 at 16:02
@Rails beginner, every time a browser is refreshed it essentially "forgets" the state of the webpage. There are a few ways of storing persistent client-side data across web requests, but in this case, it's simply a manner of checking the state of the checkbox when the page first loads, which is exactly what the call to
change() does.– zzzzBov
Aug 1 '11 at 16:02
|
show 4 more comments
0
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?
answered Apr 26 '15 at 11:09
Amam Dewan
34
add a comment |
0
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?
answered Apr 26 '15 at 11:09
Amam Dewan
34
add a comment |
0
0
0
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?
answered Apr 26 '15 at 11:09
Amam Dewan
34
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>I used jquery in checkbox. When I clicked on one element the other elements are effected. How can I fix this problem?
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
cursor: pointer;
display: block;
position: relative;
width:100%;
height:100%;
}
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
.vfb-checkbox input[type=checkbox] {
display: none;
}
.checked{
background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>answered Apr 26 '15 at 11:09
Amam Dewan
34
answered Apr 26 '15 at 11:09
Amam Dewan
34
answered Apr 26 '15 at 11:09
Amam Dewan
34
answered Apr 26 '15 at 11:09
Amam Dewan
34
34
add a comment |
add a comment |
0
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
add a comment |
0
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
add a comment |
0
0
0
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
$('input:checkbox').change(function(){
$('div.menuitem').toggleClass('menuitemshow', this.checked);
})
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
edited Dec 28 '18 at 12:54
tiagoperes
2,20521734
2,20521734
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
answered Dec 27 '18 at 14:48
Yannick Dirbé
244
244
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%2f6899859%2fjquery-if-checkbox-is-checked-add-a-class%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
