web-dev-qa-db-fra.com

Case à cocher Vérifier l'écouteur d'événements

Récemment, j’ai travaillé avec l’API du plugin Chrome) et j’essaie de développer un plugin qui me facilitera la vie pour la gestion d’un site Web.

Maintenant, ce que je veux faire est de déclencher un événement quand une certaine case à cocher est cochée. Comme ce site ne m'appartient pas, je ne peux pas modifier le code. Par conséquent, j'utilise l'API Chrome. L'un des principaux problèmes est que, plutôt qu'un identifiant, il existe un nom. I Je me demandais si je pouvais activer la fonction une fois que la case à cocher avec le nom était cochée.

javascripthtmlgoogle-chromegoogle-chrome-extensiondom-events
46
Oliver Kucharzewski

En supposant que vous utilisez ce balisage:

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

Sans jQuery

Utilisation de jQuery-like querySelector .

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

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

Avec jQuery

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

Puisque je ne vois pas la balise jQuery dans l'OP, voici une option 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
        }
    });
});

Voir JSFIDDLE

41
JFK

Si vous avez une case à cocher dans votre HTML quelque chose comme:

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

et vous souhaitez ajouter un EventListener à cette case à l'aide de javascript, dans votre fichier js associé, vous pouvez procéder comme suit:

checkbox = document.getElementById('conducted');

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

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

});
0
SabU