Question

我有一个带有“iCheck”复选框的表单，想要检查复选了多少个复选框。 iCheck（其中包括）我使用的回调“ifChecked”和“ifUnchecked”。问题是：当我检查第一个复选框（“Apple”）时，我得到一个“0” - 当我再次点击“Apple”时我得到一个“1” - 所以我无法正确使用“长度”功能在那个例子中。知道该怎么做吗？

背景是我想首先隐藏“篮子”，然后显示篮子母鸡至少有1或者最大值。 3个水果检查。当用户选择4个或更多水果时，我想再次隐藏篮子。

这是Codepen link

$('.my_cool_form input').on('ifChanged', function() {
  if ($('.my_cool_form .checked').length == 0 ) {
$('.info').addClass('active');
  }
  if ($('.my_cool_form .checked').length == 3 ) {
    $('.info').removeClass('active');
  }
});

Answer 1

您只需使用:checked选择器验证所有选中的复选框：

$('.my_cool_form input').on('ifChanged', function() {
    if ($('.my_cool_form input[type="checkbox"]:checked').length < 3 ) {
        $('.info').addClass('active');
    }
    else{
        $('.info').removeClass('active');
    }
});

Answer 2

这适用于您：

只需将$('input').on('ifChanged', function()更改为

即可

// show checked elements
$('input').on('ifChanged', function() {                             
    var string = $('.my_cool_form input[type="checkbox"]:checked').length;
    $('.jQuery_length_info span').text(string);
});

我还添加了load功能：

$(window).on('load',function(){
  if ($('.my_cool_form input[type="checkbox"]:checked').length < 3 ) {
      $('.info').addClass('active');
  }
  else{
      $('.info').removeClass('active');
  }

});

选中加载时的复选框

我在你的codepen 中尝试了这一切，它对我来说都很好。

为您工作codepen，希望这对您有所帮助。

jQuery“。length”+复选框令人困惑

2 个答案: