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

debugcn 发表于 Dev

Niladri Banerjee - Uttarpara

如果从多个复选框中选择了至少一个复选框，我想检查长度。但是，对于以下内容，它不返回任何内容。该功能未触发。我已经添加了所需的 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([email protected]);
        -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>

安德烈亚斯

您必须使用iCheck 特定事件：

ifClicked: 用户点击了自定义输入或指定的标签
ifChanged：输入的“已检查”、“已禁用”或“不确定”状态已更改
ifChecked：输入的状态更改为“已检查”
ifUnchecked：“检查”状态被删除
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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。