如果要从多个复选框中至少选择一个复选框,我想检查长度。但是,对于以下内容,它什么也不返回。该功能未触发。我添加了所需的jQuery,css,JS脚本等以获得更好的示例。我的意图是通过长度方法,我要检查是否至少选中了一个复选框,否则返回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>
答案 0 :(得分:1)
您必须使用iCheck specific events:
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>