Question

我是jQuery的新手，并且对一些简单的代码还不错，但这使我感到困惑。

我有一个复选框列表，我需要计算已选中复选框的数量并将其显示在文本框中。我想根据人数添加其他班级。

如果 1或2 ，则分类.blue

如果 3个或更多，则上.red类

如果0 AND 选中了“以上都不是” 复选框，则类.green *必须选中“以上皆非” 复选框以添加类.green. 值“ 0”还不够 。我需要用户注意并确保“以上均不存在”。

我设法使其正常运行，并使选中状态在“以上都不存在”和其余状态之间切换。

我仍然对addClass的故障感到困惑，如下所示：

我期望的是：

当我单击1或2复选框时，班级会变成蓝色。
如果我单击第三个，则它会变成红色。
如果我未选中任何一项，则它会变回蓝色。
如果未全部选中，则没有样式。
如果选中“以上都不是”，则它变为绿色。
如果我取消选中任何复选框，则该类应返回到之前的状态。

这就是我得到的：

当检查3个或更多时，我没有获得'.red'类。
如果我取消选中任何复选框，则该类保持不变。
如果我取消选中所有选项，而无论“上述都不是”， ".green"！

这是我的代码：

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

这是jsfiddle： http://jsfiddle.net/A888/h83z0knf/

谢谢。请记住，我是这里和jQuery的新手，因此请您在对我投反对票之前，先弄清楚或修正甚至删除我的信息。发布前我已尽力了。

编辑： 除了绿色仅在以下情况下有效：

首先选中“ nota”，然后再选中其他复选框或
在选中其他复选框后检查nota，然后保留上一类，并且在未选中（nota）时变为绿色！这是现在唯一的问题。

更新了jsfiddle： http://jsfiddle.net/A888/dkvf1zeq/

更新的代码：

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

编辑：最新的工作代码期望做一件事，如最后一个小提琴中的注释所示： http://jsfiddle.net/A888/hnf5L06m/

这是目前可以正常运行的代码，但绿色（及其未更新的相关msg）问题除外：（包括有关其余问题的评论）

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

实际上，发生的问题是所有类都已插入并且绿色类属性正在使用。

因此您需要先删除所有类，而不是根据结果添加新类。

使用此代码 count.removeClass（“ green blue red”）.addClass（res）; 代替 count.addClass（res）;

Answer 2

添加此代码即可获得准确的结果

  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);

jQuery addClass有什么问题

2 个答案: