无法在iCheck-helper复选框中获取选中状态

本文关键字：获取 状态 复选框 iCheck-helper | 更新日期: 2023-09-27 18:09:33

我在MVC 4 web应用程序中使用Bootstrap主题。我的应用程序中有一个复选框。

我的Razor代码如下。

<div class="form-group">
     <div class="checkbox">
           <label>
                @Html.CheckBoxFor(model => model.NeedsRepacking)Needs Repacking
           </label>
     </div>
</div>

，但在web浏览器中没有显示复选框。请查看渲染后的代码。

<div class="form-group">
     <div class="checkbox">
        <label class="">
             <div class="icheckbox_minimal-blue" style="position: relative;"><input data-val="true" data-val-required="The NeedsRepacking field is required." id="NeedsRepacking" name="NeedsRepacking" type="checkbox" value="true" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div><input name="NeedsRepacking" type="hidden" value="false">Needs Repacking
         </label>
     </div>
</div>

当我选中复选框div类更改为icheckbox_minimal-blue checked。

 <div class="form-group">
     <div class="checkbox">
        <label class="">
             <div class="icheckbox_minimal-blue checked" style="position: relative;"><input data-val="true" data-val-required="The NeedsRepacking field is required." id="NeedsRepacking" name="NeedsRepacking" type="checkbox" value="true" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins></div><input name="NeedsRepacking" type="hidden" value="false">Needs Repacking
         </label>
     </div>
</div>

但是我无法获得复选框的选中状态

无法在iCheck-helper复选框中获取选中状态

这是我正在研究的一个项目的复制/粘贴/修改，并且与iCheck库有相同的问题。此解决方案未经过100%测试，因此您需要将其修改为您的代码:

<script type="text/javascript">
    $(document).ready(function () {
        $(".checkbox > .icheckbox_minimal-blue > .iCheck-helper").click(function (e) {
            var id = e.toElement.parentNode.firstChild.id;
            var isChecked = $('#' + id).is(':checked');
            if (isChecked)
            {
                alert('Checked!');
            }
    });
</script>

注意:这段代码可以而且应该被重构和优化。

相关文章：