如何绑定到复选框选中事件答案

【问题标题】：How to bind to checkbox checked event如何绑定到复选框选中事件
【发布时间】：2018-03-19 06:02:21
【问题描述】：

如果选中复选框，如何运行 javascript 代码？

复选框被定义为

    <input type="checkbox" id="Maksja_piiratudes" name="Maksja_piiratudes" 

onfocus="if(typeof this.ischanged=='undefined') this.ischanged=false" onblur="summarefresh()" onclick="dataChanged(this)">

我试过了

$(function () {
  $("#Maksja_piiratudes").on("change", function() {

alert('checkbox is checked');

});  // end on change
}); // end $

但如果未选中复选框，这也会运行。仅在选择 checkgox 时如何运行代码？

Bootstrap 3, jquery, jquery UI都用到了。

【问题讨论】：

缺少一行。我编辑了问题并添加了缺失的行

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

您可以使用复选框输入的checked 属性。

$(function()
{
    $('#Maksja_piiratudes').on('change', function()
    {
        if (this.checked)
        {
            alert('checkbox is checked');
        }
    });
});

编辑：

我更喜欢香草风格……所以以防万一有人需要它：

document.querySelector('#Maksja_piiratudes')
        .addEventListener('change', function()
{
    if (this.checked)
    {
        alert('checkbox is checked!');
    }
}, false);

【讨论】：

event.target === this
这可能会绑定到页面中的所有复选框。如何运行仅由 html 定义的特定复选框的代码有问题？此复选框具有唯一的 id 和 name 属性id="Maksja_piiratudes" name="Maksja_piiratudes"
这是您编辑代码之前的示例，请参阅我的上次更新
@Andrus document.querySelector() 返回匹配选择器的第一个元素
@Kai 谢谢。使用没有 jquery 的本机代码看起来不错。 jquery 事件通过引导程序用于其他元素，并且可能在自定义代码中。因此本机和 jquery 事件处理程序都在同一页面中。可以吗，我看了不推荐这样做

【解决方案2】：

试试这个

$(function () {
    $("#Maksja_piiratudes").on("change", function() {    
       if ($(this).prop("checked") == true) {
           alert('checkbox is checked');
       } //end if
    });  // end on change
}); // end $

如果你想让它对所有复选框都是全局的，请使用以下：

$(function () {
    $("input[type='checkbox']").on("change", function() {    
       if ($(this).prop("checked") == true) {
           alert('checkbox is checked');
       } //end if
       else {
           alert('checkbox is unchecked');
       }
    });  // end on change
}); // end $

【讨论】：