Kontrollkästchen Ereignis-Listener aktivieren

Vor kurzem habe ich mit der Chrome Plugin API gearbeitet und möchte ein Plugin entwickeln, das mir das Leben bei der Verwaltung einer Website erleichtert.

Jetzt möchte ich ein Ereignis auslösen, wenn ein bestimmtes Kontrollkästchen aktiviert ist. Da diese Website mir nicht gehört, kann ich den Code nicht ändern, daher verwende ich die Chrome-API. Eines der Hauptprobleme ist, dass es keinen Namen gibt, sondern einen Namen. Ich habe mich gefragt, ob ich die Funktion auslösen könnte, wenn das bestimmte Kontrollkästchen mit dem Namen aktiviert ist.

Angenommen, Sie verwenden dieses Markup:

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

Ohne jQuery

Verwenden des jQuery-ähnlichen querySelector .

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

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

Mit jQuery

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

Da ich das jQueryTag im OP nicht sehe , gibt es hier nur eine Javascript- Option:

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
        }
    });
});

Siehe JSFIDDLE

Wenn Sie ein Kontrollkästchen in Ihrem HTML haben, wie:

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

Wenn Sie diesem Kontrollkästchen mithilfe von Javascript einen EventListener hinzufügen möchten, können Sie in der zugehörigen JS-Datei Folgendes tun:

checkbox = document.getElementById('conducted');

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

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

});