取消选中复选框时，jQuery .removeClass/.toggleClass 不起作用

Question

我在名称和 id = selectArticle[] 的页面上有几个复选框。我需要的是，每当用户选中复选框时，某些元素应该附加 class="required" ，当我取消选中同一个框时，应该删除 class="required" 。

我尝试过 .addClass 和 .removeClass，但是每当我取消选中复选框时，.remove 效果就永远不会发生。但是，当我再次选中复选框时（在 .toggleClass 的情况下），该类会完美切换。似乎它仅适用于复选框“选中”事件而不是未选中。

通过警报，我已经检查过，检查/取消检查事件都已完美触发，但 .removeClass/.toggleClass 根本不起作用。

我该如何解决这个问题。请帮帮我！！！

       $("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);
    });

更新：下面的答案

    $("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

原始问题的问题在于您在 UPDATE 中有两个 IF 语句。如果它是 CHECKED，则第一个 UNCHECKED 框，但随后第二个 IF 语句将重新检查该框，因为它现在是 UNCHECKED。

如果您仍然有这种设置，那么任何事情都不会正常工作，因为您只是在来回翻转状态。确保您只有 IF-A-THEN-B-ELSE-C 而不是 IF-A-THEN B 后跟 IF-B-THEN-A。

希望这会有所帮助。 :-)

Answer 2

因为toggleClass不工作试试

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

确保您的 var id=$(this).val(); 包含有效的内容，因为 ("#title"+id)、$("#id"+id) 和其他人使用相同的变量。

Answer 3

嗯……

else if($(this).is(':unchecked'))

:unchecked 不是有效的 jQuery 选择器。试试else 或：

if(!$(this).is(':checked'))