时间戳

首页 > 解决方案 > 如果至少选中一个复选框，则检查长度

jquery - 如果至少选中一个复选框，则检查长度

问题描述

如果从多个复选框中选择了至少一个复选框，我想检查长度。但是，对于以下内容，它什么也不返回。该函数未触发。我添加了所需的 jQuery、css、JS 脚本等作为更好的示例。我的意图是通过length方法，我想检查是否至少选中了一个复选框，否则返回0。

function checkcond1checkbox() {
  var checked = $("#productModal input:checkbox:checked").length;
  alert(checked);
}


$(function () {
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green'
})
});
/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: url(green.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat-green {
    background-position: 0 0;
}
    .icheckbox_flat-green.checked {
        background-position: -22px 0;
    }
    .icheckbox_flat-green.disabled {
        background-position: -44px 0;
        cursor: default;
    }
    .icheckbox_flat-green.checked.disabled {
        background-position: -66px 0;
    }

.iradio_flat-green {
    background-position: -88px 0;
}
    .iradio_flat-green.checked {
        background-position: -110px 0;
    }
    .iradio_flat-green.disabled {
        background-position: -132px 0;
        cursor: default;
    }
    .iradio_flat-green.checked.disabled {
        background-position: -154px 0;
    }

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox_flat-green,
    .iradio_flat-green {
        background-image: url(green@2x.png);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>

<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" onclick="return checkcond1checkbox();" name='Selectedproducts1[]' value="2">2
</div>

标签： jqueryicheck

解决方案

您必须使用iCheck 特定事件：

  • ifClicked：用户点击自定义输入或分配的标签
  • ifChanged：输入的“已检查”、“禁用”或“不确定”状态已更改
  • ifChecked：输入的状态更改为“已检查”
  • ifUnchecked: "checked" 状态被移除
  • ifToggled：输入的“已检查”状态已更改
  • ifDisabled：输入的状态更改为“禁用”
  • ifEnabled：“禁用”状态被移除
  • ifIndeterminate：输入的状态更改为“不确定”
  • ifDeterminate：“不确定”状态被移除
  • ifCreated: 输入只是自定义的
  • ifDestroyed: 自定义刚刚删除

$(function() {
  var checkboxes = $('input[type="checkbox"].flat-red, input[type="radio"].flat-red');
  
  checkboxes.iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    })
    .on('ifChanged', function(event){
      var l1 = checkboxes.filter(":checked").length,
          l2 = $('input[type="checkbox"]').filter(":checked").length,
          l3 = $("input:checked").length;
          
      console.log(l1, l2, l3);
    });
});
/* iCheck plugin Flat skin, green
----------------------------------- */
.icheckbox_flat-green,
.iradio_flat-green {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<div class="box-body row" id="productModal">
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="1">1
  <input type="checkbox" class="flat-red checkbox prodcheckboxes" name='Selectedproducts1[]' value="2">2
</div>

推荐阅读