what's wrong with this jQuery addClass

Question

I'm new to jQuery and have been fine with some simple codes but this one is puzzling me.

I have a list of checkboxes and I need to count the number of checked ones and display the count in a textbox. I want to add different class according to the count.

If 1 or 2 then class .blue

If 3 or more then class .red

If 0 AND a "none of the above" checkbox is checked then class .green * The "none of the above" checkbox has to be checked to add the class .green. A value of "0" is not enough. I need the user to be aware and sure of the "none of the above".

I managed to make it work and to make the checked status toggle between the "none of the above"and the rest.

I'm still puzzled by the addClass malfunctioning as follows:

What I expect is:

• When I click 1 or 2 checkboxes, the class goes blue.

• If I click a third one then it goes red.

• If I unchecked one, then it goes back to blue.

• If unchecked all then no style.

• If checked the "none of the above" then it goes green.

• If I uncheck any checkbox then the class should go back to the previous status.

This is what I'm getting:

• I'm not getting the '.red' class when 3 or more are checked.

• If I uncheck any checkbox, the class stays the same.

• If I uncheck all and regardless of the "none of the above", it goes ".green"!

This is my code:

$('input:checkbox').change(function() {
  var a = $("input.ab:checked").length
  $(".count").val(a);
  var count = $(".count").val(a);
  var res = '0';
  var nota = $('input.nota:checked');

  if (a < 1 && nota) {
    var res = ('green');
  } else if (a < 3 && a > 0) {
    var res = ('blue');
  } else if (a => 3) {
    var res = ('red'); // not working !
  }
  count.addClass(res);
});
// toggle checked
$("input.ab").change(function() {
    $("input.nota").not(this).prop('checked', false);  
});

$("input.nota").on('change', function() {
    $(".count").val(0)
    $("input.ab").not(this).prop('checked', false);    
});

Html:

<div>
  <h4>Count checked, toggle, add class to each result</h4>
  <u>
    <li class='gr'> If "None of the above" is checked then: GREEN </li>
    <li class='bl'> If count = 1 or 2 then: Blue </li>
    <li class='rd'> If count 3 or more then: Red </li>
  </u>
  <p>
    <input type='checkbox' class='ab'>AB
  </p>
  <p>
    <input type='checkbox' class='ab'>ABC
  </p>
  <p>
    <input type='checkbox' class='ab'>ABDC
  </p>
    <p>
    <input type='checkbox' class='ab'>ABCDEF
  </p>
  <p>
    <input type='checkbox' class='nota'> None of the above (HAS TO be checked to be green)
  </p>
  <p>
    Count: <input type='text' class='count'>
  </p>
</div>

This is the jsfiddle : http://jsfiddle.net/A888/h83z0knf/

Thank you. Please remember I'm a newbie here and in jQuery so please ask me to clarify or fix or even delete my post before you down-vote me. I tried my best before posting.

EDIT: This is now working except for the green only works if:

• First checked the nota it before checking any other checkbox or

• Checking the nota after other checkboxes were checked, it then keeps the previous class and when unchecked (nota) it goes to green !! This is the only issue now.

updated jsfiddle: http://jsfiddle.net/A888/dkvf1zeq/

Updated code:

$('input:checkbox').change(function() {
  var a = $("input.ab:checked").length
  $(".count").val(a);
  var count = $(".count").val(a);
  var res = '0';
  var nota = $('input.nota:checked');

  if (a < 1 && nota) {
    var res = ('green'); // this is only working when I uncheck the nota if other checkboxes were checked then the nota checked and unchecked
  } else if (a < 3 && a > 0) {
    var res = ('blue');
  } else if (a => 3) {
    var res = ('red'); 
  }
  count.removeClass( "green blue red" ).addClass(res);
});
// toggle checked
$("input.ab").change(function() {
    $("input.nota").not(this).prop('checked', false);  
});

$("input.nota").on('change', function() {
    $(".count").val(0)
    $("input.ab").not(this).prop('checked', false);    
});

EDIT: Latest code that's working expect for one thing as shown in the comment on this last fiddle: http://jsfiddle.net/A888/hnf5L06m/

This is the now working code except for that green (and its un-updated related msg) issue: (comments on remaining issue included)

        $('input:checkbox').click(function() {
          var a = $("input.ab:checked").length
          $(".count").val(a);
          var count = $(".count").val(a);
          var res = '0';
          var nota = $('input.nota:checked');

     /* This is working as expected now except when if I click on one of the above after the nota was clicked (green)
 it then goes (1) and stay green (AND the message for green too!) till clicked again or another checkbox clicked that's when it changes to blue (count 2). */

           if (nota.prop('checked') && nota.prop('checked') == true) {
           var res = ('green'); 
           } else if (a < 3 && a > 0) {
           var res = ('blue');
           } else if (a >= 3) {
           var res = ('red');
           }else{ var res = ('');
           }
           count.removeClass( "green blue red" ).addClass(res);

          // message for each
          var msg = '0';
          if (a < 1 && nota) {
            var msg = ('some message here green');
          } else if (a < 3 && a > 0) {
            var msg = ('some message here blue');
          } else if (a >= 3) {
            var msg = ('some message here red');
          }
          $('.message').val(msg);
        });

        // toggle checked
        $("input.ab").change(function() {
          $("input.nota").not(this).prop('checked', false);
        });

        $("input.nota").on('change', function() {
          $(".count").val(0)
          $("input.ab").not(this).prop('checked', false);
        });

Answer 1

Add this code to get your exact result

  if (nota.prop('checked') && nota.prop('checked') == true) {
    var res = ('green'); // this is only working when I uncheck the nota if other checkboxes were checked then the nota checked and unchecked
  } else if (a < 3 && a > 0) {
    var res = ('blue');
  } else if (a >= 3) {
          var res = ('red'); 
  }else{
    var res = (''); 
        }
  count.removeClass( "green blue red" ).addClass(res);

Answer 2

Actually what is the issue happening is that all class are getting inserted and green class properties is getting used.

so you need to remove all the classes first than need to add new class according to result.

use this code count.removeClass( "green blue red" ).addClass(res); in place of count.addClass(res);