JQuery toggles class with .removeClass () and .addClass () not working properly

Question

I implemented a switch in my path as described below. HTML:

<table> <thead> <tr> <th class="selectCol"><div class="unCheckedCheckBoxAll"></div></th> <th class="nosCol">Products</th> </tr> </thead> <tr> <td><div class="unCheckedCheckBox"></div></td> <td>ABCD</td> </tr> <tr> <td><div class="unCheckedCheckBox"></div></td> <td>PQRS</td> </tr> </table> 

CSS

 .unCheckedCheckBox, .unCheckedCheckBoxAll { width: 25px; height: 25px; margin-top: -4px; background: transparent url(http://i.stack.imgur.com/tsaPu.png) top left no-repeat; } .CheckedCheckBox,.CheckedCheckBoxAll { width: 25px; height: 25px; margin-top: -4px; background: transparent url(http://i.stack.imgur.com/tsaPu.png) 0 -60px; } 

JQuery

 $(".CheckedCheckBox").click(function () { $(this).removeClass('CheckedCheckBox').addClass('unCheckedCheckBox'); if ($(".CheckedCheckBox").length == 0) { $('.CheckedCheckBoxAll').removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll'); } }); $(".unCheckedCheckBox").click(function () { $(this).removeClass('unCheckedCheckBox').addClass('CheckedCheckBox'); if ($(".unCheckedCheckBox").length == 0) { $('.unCheckedCheckBoxAll').removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll'); } }); $(".CheckedCheckBoxAll").click(function () { $(this).removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll'); $('.CheckedCheckBox').removeClass('CheckedCheckBox').addClass('unCheckedCheckBox'); }); $(".unCheckedCheckBoxAll").click(function () { $(this).removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll'); $('.unCheckedCheckBox').removeClass('unCheckedCheckBox').addClass('CheckedCheckBox'); }); 

Now the problem is that when I click on the unchecked div, it becomes a checked div, but when I click on the marked div, it goes into an unverified function, although the class is checked. Help me. I do not understand what the problem is.

Here is the jsfiddle link:

http://jsfiddle.net/nscZA/3/

Image I use:

Answer 1

The Bind event is saved when the page loads, so if you want the .CheckedCheckBox class .CheckedCheckBox have an action, you must add a binding when adding a class and remove the binding when you delete the class. But this is not a good approach. Using toggleClass is what you need.

Here is a script of what I did: http://jsfiddle.net/nscZA/8/

I will even link to the checkbox , so you do not need to add / remove it

 $(".checkBox").click(function () { $(this).toggleClass('isChecked'); if ($(".checkBox").length == $(".isChecked").length) { $('.checkBoxAll').addClass('checkAllChecked'); }else{ $('.checkBoxAll').removeClass('checkAllChecked'); } }); 

It adds a class and checks if all the checkbox is checked.

I try to make you research my solution and ask if there is something that you don’t understand.

Please note that I slightly modified your html / css class.

Greetings

Answer 2

IF you want to do it this way, you have to do it with the .on function: reason, you will not have the function (event management with clicks) correctly attached to classes that are not currently running, you have it.

 $(document).on('click','.unCheckedCheckBox',function () {...rest of your function 

NOTE. If possible, put the binding in the nearest shell, for example, give the shell and table ID and do:

 $('#mytableid').on('click','.unCheckedCheckBox',function () { 

JQuery 1.9.1 example: http://jsfiddle.net/nscZA/6/

NOTE. Do not use sprites (do not load), but use colors

---

EDIT: senior delegate with table id:

 <table id='mytablewrapper'> 

Syntax

slightly different:

 $('#mytablewrapper').delegate(".CheckedCheckBox", 'click', function () { 

delegate example: http://jsfiddle.net/nscZA/7/

NOTE. Do not use sprites (do not load), but use colors