如何绑定到复选框选中的事件

时间:2017-10-07 16:30:40

标签: javascript jquery html5 twitter-bootstrap checkbox

如果选中复选框,如何运行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。

2 个答案:

答案 0 :(得分:2)

您可以使用复选框输入的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);

答案 1 :(得分:0)

试试这个

$(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 $