复选框检查事件监听器

Question

最近,我一直在努力与Chrome的插件API,我期待开发的一个插件,让生活我来说更容易管理网站.

现在我想要做的是在选中某个复选框时触发事件.由于此网站不属于我,因此我无法更改代码,因此我使用的是Chrome API.其中一个主要问题是,有一个名称而不是ID.我想知道一旦选中带有'name'的复选框,我是否可以触发该功能.

谢谢

Answer 1

假设您正在使用此标记:

<input type="checkbox" name="checkbox">

没有jQuery

使用类似jQuery的querySelector.

var checkbox = document.querySelector("input[name=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        // Checkbox is checked..
    } else {
        // Checkbox is not checked..
    }
});

用jQuery

$('input[name=checkbox]').change(function(){
    if($(this).is(':checked')) {
        // Checkbox is checked..
    } else {
        // Checkbox is not checked..
    }
});

Answer 2

由于我jQuery在OP中没有看到标记,因此这里只有一个javascript选项:

document.addEventListener("DOMContentLoaded", function (event) {
    var _selector = document.querySelector('input[name=myCheckbox]');
    _selector.addEventListener('change', function (event) {
        if (_selector.checked) {
            // do something if checked
        } else {
            // do something else otherwise
        }
    });
});

请参阅JSFIDDLE

Answer 3

如果您的 html 中有一个复选框，例如：

<input id="conducted" type = "checkbox" name="party" value="0">

并且您想使用 javascript 在此复选框中添加一个 EventListener，在关联的 js 文件中，您可以执行以下操作：

checkbox = document.getElementById('conducted');

checkbox.addEventListener('change', e => {

    if(e.target.checked){
        //do something
    }

});