事件处理复选框-jQuery icheck插件

Event handling checkbox - jQuery icheck plugin

本文关键字：插件 icheck -jQuery 复选框 事件处理      更新时间：2023-09-26

它看起来简单明了，但我无法简单地点击复选框。

HTML

<input type="checkbox" name="chkfront[]" class="front-checkbox">

jQuery

<script language="javascript">
$(document).ready(function () {
    alert("triggered1");
    $(".front-checkbox").click(function() {
        alert("triggered");
    });
});

但它根本不起作用，也没有显示错误。我被卡住了

当我尝试使用：

<a class="front-checkbox" href="javascript:void(0)">dd</a>

它正在工作。。为什么它对checkbox行为不端

在检查复选框时，我发现以下内容：

<input type="checkbox" name="chkfront" class="front-checkbox" 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; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>

我怀疑复选框正在生成div，并且事件在那里被触发

我以某种方式从icheck文档中管理了它

$(document).ready(function () {
     $('.front-checkbox').on('ifChecked', function(event){
         alert('xx');
     });
  });

了解更多http://fronteed.com/iCheck/

复选框应该使用change事件，而不是click:

$(document).ready(function () {
    $(".front-checkbox").change(function() {
        if(this.checked)
         alert("checked");
        else
         alert("unchecked");
    });
});

如果HTML是在DOM加载后动态生成的，则使用委派事件：

$(document).ready(function () {
        $(document).on("change",".front-checkbox",function() {
            if(this.checked)
             alert("checked");
            else
             alert("unchecked");
        });
    });
相关文章：