代码之家 › 专栏 › 技术社区 › Niladri Banerjee - Uttarpara

如果至少选中了一个复选框,则选中“长度”

icheck jquery

-1

Niladri Banerjee - Uttarpara · 技术社区 · 6 年前

如果从多个复选框中选择了至少一个复选框,我想检查长度。但是,对于下面的内容,它不返回任何内容。函数没有启动。为了更好的例子,我添加了所需的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>

1 回复 | 直到 6 年前

1

Andreas 6 年前

你必须使用 iCheck specific events :

ifClicked :用户单击了自定义输入或指定的标签
ifChanged :输入的“checked”、“disabled”或“indeterminate”状态已更改
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>