Toggle parent class of checkbox on check action using jquery

Question

I am trying to make a form with multiple checkboxes. I want to highlight the checkboxes with their content to indicate to the user of the selection
I am using the following layout for my form

HTML

<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>

CSS

.labl{

height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}

jQuery

<script>

$("input[type=checkbox]").change(function() {
    $(this).parent().toggleClass("chked");
});

</script>

Now when alpha is checked it should change the class of div from labl to chked
but it is not

jsfiddle.net/EcCr3 is working but it does not work in my code. my code is at techvisionblog.in/ipscan/facebook.html — Ashmeet Singh
– Ashmeet Singh, Commented Jan 30, 2014 at 12:44
they are added dynamically after facebook login is completed — Ashmeet Singh
– Ashmeet Singh, Commented Jan 30, 2014 at 12:57

Anton · Accepted Answer · 2014-01-30 12:56:51Z

1

You need a DOM ready handler like this $(function(){...});

$(function () {
    $("input[type=checkbox]").change(function () {
        $(this).parent().toggleClass("chked");
    });
});

Documentation

Update

It appears that the checkbox is dynamically added to the DOM so you must use event delegation like this

    $(document).on("change","input[type=checkbox]",function () {
        $(this).parent().toggleClass("chked");
    });

edited Jan 30, 2014 at 12:56

answered Jan 30, 2014 at 12:37

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anton Over a year ago

@AshmeetSingh what exactly is not working? Is it doing nothing or doing something unexpected? Also check console for any errors.

Ashmeet Singh Over a year ago

nothing is working. the page is acting as if there is no jQuery script you can see my page at techvisionblog.in/ipscan/facebook.html

Anton Over a year ago

@AshmeetSingh there are no checkboxs in the link

Ashmeet Singh Over a year ago

you have to login from via facebook to see the checkboxes but the javascripts are there. checkboxes will appear after facebook login is compelete

Anton Over a year ago

@AshmeetSingh are the checkboxes dynamically added to the DOM?

|

Arun P Johny · Accepted Answer · 2014-01-30 12:39:02Z

1

You can pass both the class names to the toggleClass() method, so that only one of the will be applied at a time

jQuery(function(){
    $("input[type=checkbox]").change(function() {
        $(this).parent().toggleClass("labl chked");
    });
})

Demo: Fiddle

answered Jan 30, 2014 at 12:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

Ashmeet Singh Over a year ago

it seems to be working in fiddle but not in my code. In my code it appears just as if there is no jQuery my code is at techvisionblog.in/ipscan/facebook.html

Arun P Johny Over a year ago

@AshmeetSingh there is no checkbox element in your page

Manik Arora · Accepted Answer · 2014-01-30 12:44:04Z

0

just change your script to

$("input[type=checkbox]").change(function() {
    $(this).parents('.labl').toggleClass("chked");
});

And your HTML to

<form>
<div class='labl'>
    <input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>

Here is the updated fiddle

http://jsfiddle.net/k242J/

answered Jan 30, 2014 at 12:44

Manik Arora

3104 silver badges12 bronze badges

3 Comments

Ashmeet Singh Over a year ago

it seems to work fine over here but in my own script it is not working at all my script is at techvisionblog.in/ipsacn/facebook.html

Manik Arora Over a year ago

Where is the checkbox on your site?

Ashmeet Singh Over a year ago

they are added dynamically after login from facebook is completed

Sanju2014 · Accepted Answer · 2014-01-30 13:02:15Z

0

toggleClass functionality is to check the class, if not there it will add, else remove class thats it. its not to change from one class to another.

css

.chked {
    background: #4285f4;
}

js

$("input[type=checkbox]").change(function() {
     $(this).parent().toggleClass("chked");
 });

answered Jan 30, 2014 at 13:02

Sanju2014

464 bronze badges

1 Comment

Anton Over a year ago

toggleClass can be used to change one class to another

Collectives™ on Stack Overflow

Toggle parent class of checkbox on check action using jquery

HTML

CSS

jQuery

4 Answers 4

6 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

jQuery

4 Answers 4

6 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related