无法触发复选框的 javascript 事件 OnClick答案

【问题标题】：Unable to fire javascript event OnClick of checkbox无法触发复选框的 javascript 事件 OnClick
【发布时间】：2016-06-27 21:05:25
【问题描述】：

所以我有一个无法触发OnClick 事件的复选框控件。我尝试了许多不同的方法：绑定事件onload 并将事件作为参数添加到<input type="checkbox"> 标记中。

这是我最近的代码迭代。我试图解雇Alert 只是为了确认它发生了变化。

<section class="border-bottom">
    <div id="approx" class="content">
        <h3>This is my approximate location</h3>
        <div class="form-control-group">
            <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
                <input type="checkbox"  />
            </div>
        </div>
    </div>
</section>

JavaScript：

$('input[type="checkbox"]').bind('click', function() {
    alert("OK");
})

我也不介意通过以下输入来运行它：

<input type="checkbox" onclick="runMyFunction(); return false;" />

【问题讨论】：

标签： javascript jquery checkbox onclicklistener

【解决方案1】：

您应该使用以下方法之一：

.click(function() { ... })
.change(function() { ... })
.on('click', function() { ... })

HTML：

<div section class="border-bottom">
    <div id="approx" class="content">
        <h3>This is my approximate location</h3>
        <div class="form-control-group">
            <div class="form-control form-control-toggle" data-on-label="yes" data-off-label="no">
                <input type="checkbox" id="checkbox" />
            </div>
        </div>
     </div>
</section>

JavaScript：

$('#checkbox').change(function() {
    alert("OK");
});

【讨论】：

【解决方案2】：

一些插件需要：

$("#checkbox").on('change', function() {
    // content
});

或者寻找你的插件的手册（有时你需要使用：pluginName.changeexchange for change）

【讨论】：

【解决方案3】：

首先在 $(document).ready 函数中使用您的 jquery 函数来确保 dom 已准备好，如下所示：

       $(document).ready(function () {
            $('input[type="checkbox"]').bind('click', function () {
                alert("OK");
            })
        });

https://jsfiddle.net/4fmL1zfr/8/

【讨论】：