1

我在名称和 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);
    });
4

3 回答 3

3

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

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

希望这可以帮助。:-)

于 2012-12-04T20:35:37.080 回答
2

因为toggleClass不工作尝试

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

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

于 2012-04-20T20:52:09.760 回答
1

嗯……

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

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

if(!$(this).is(':checked'))
于 2012-04-20T20:49:12.237 回答