Question

I have few checkboxes on a page with name and id = selectArticle[]. What I need is that whenever user checks the checkbox, certain elements should get class=”required” attached to it and when I uncheck the same box, the class=”required” should be deleted.

I have tried .addClass and .removeClass, however whenever i uncheck the checkbox the .remove effect never takes place. However when i Check the checkbox again(in case of .toggleClass), the class toggles perfectly. It seems like it works only on the checkbox ‘checked’ event and not unchecked.

Through alert, I have checked, both the check/uncheck events are fired perfectly yet the .removeClass/.toggleClass doesnt work at all.

How do I rectify this problem. Please help me out!!!

       $("input[name='selectArticle[]']:checkbox").live('change',function(){
          var n = $("input[name='selectArticle[]']:checked").length;
          var id=$(this).val();
          var v = $(this).is(':checked');
          //var vr= $("input[name='selectArticle[]']:unchecked").val();
          //var vr= $(this).val();
          alert(v);
          alert(id);
          //alert("url"+v);
          if($(this).is(':checked'))
          {

            alert('#url'+v);
            $("#title"+id).toggleClass('required');
            $("#id"+id).toggleClass('required');
            $("#url"+id).toggleClass('required url');
            $("#category"+id).toggleClass('required');
            $("#group"+id).toggleClass('required');
          }
          else
          {
            alert("balls"+id);
            ("#title"+id).toggleClass('required');
            $("#id"+id).toggleClass('required');
            $("#url"+id).toggleClass('required url');
            $("#category"+id).toggleClass('required');
            $("#group"+id).toggleClass('required');
          }
         // $("div").text(n + (n <= 1 ? " is" : " are") + " checked!" + " value :" + v);
    });

UPDATE: The answer below

    $("input[name='selectArticle[]']:checkbox").live('change',function(){
          var n = $("input[name='selectArticle[]']:checked").length;
          var id=$(this).val();
          var v = $(this).is(':checked');
          //var vr= $("input[name='selectArticle[]']:unchecked").val();
          //var vr= $(this).val();
          alert(v);
          alert(id);
          //alert("url"+v);
          if($(this).is(':checked'))
          {

            alert('#url'+v);
            $("#title"+id).addClass('required');
            $("#id"+id).addClass('required');
            $("#url"+id).addClass('required url');
            $("#category"+id).addClass('required');
            $("#group"+id).addClass('required');
          }

         if(!$(this).is(':checked'))
          {
            alert("balls"+id);
            $("#title"+id).removeClass('required');
            $("#id"+id).removeClass('required');
            $("#url"+id).removeClass('required url');
            $("#category"+id).removeClass('required');
            $("#group"+id).removeClass('required');
          }
         // $("div").text(n + (n <= 1 ? " is" : " are") + " checked!" + " value :" + v);
    });

Answer 1

As because toggleClass is not working try

if($(this).is(':checked'))
{
    $("#title"+id).removeClass('required');
    ...
}
else
{
    $("#title"+id).addClass('required');
    ...
}

Make sure your var id=$(this).val(); contains something valid because ("#title"+id), $("#id"+id) and others using same variable.