Case À Cocher Vérifier L'Écouteur D'Événement

Récemment, j'ai travaillé avec le Chrome de l'API du Plugin et je suis à la recherche pour développer un plugin qui va rendre la vie plus facile pour moi de gérer un site web.

Maintenant ce que je voudrais faire est de tirer un événement lorsqu'une case est cochée.
Comme ce site ne m'appartient pas, je ne peut pas modifier le code donc je suis à l'aide de l'API google Chrome. L'un des principaux problèmes est qu'au lieu d'avoir un ID, il y a un Nom. Je me demandais si je pouvais le feu de la fonction une fois que le certaines de case à cocher avec le " nom " est cochée.

Grâce

InformationsquelleAutor Oliver Kucharzewski | 2013-01-27

73

En supposant que vous êtes en utilisant ce langage:
```
<input type="checkbox" name="checkbox">
```
Sans jQuery

À l'aide de jQuery comme 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..
    }
});
```
- Bien que cela fonctionne, je ne vois pas le jQuery balise dans l'OP
- Using the jQuery-like querySelector ...mmm, n'est pas un "jQuery-like" (sentez tenté de downvote)
- Ce que je voulais dire, c'est que jQuery fait de l'utilisation de la requête sélecteurs répandue en Javascript. Avant ils sont venus autour, de sélection et de trouver des éléments a été une corvée.
- toujours utiliser addEventListener au lieu de l'événement comme onchange pour plus de compatibilité.
- onchange prise en charge par tous les navigateurs et il n'y a absolument pas de différence entre le[événement] et la méthode addEventListener autre que les cas d'utilisation qui peuvent ou peuvent ne pas convenir à votre projet spécifique. S'il vous plaît dites-moi en quoi ma réponse mérite un downvote. N'est-il pas de répondre à la question?
- ne pas ajouter un écouteur d'événement. Il remplace l'existant. Cela signifie que vous bloquer cet objet avec une manifestation unique et il n'est pas bon pour d'autres plugins ou scripts de travail avec le même objet. Si j'ai un Chat" bouton, je voudrais qu'il soit accroché par d'autres thèmes, plugins ou scripts.
- Juste point de. A noté.
- J'ai essayé d'obtenir le checked valeur à l'intérieur de la fonction de rappel.. n'avais aucune idée de this.checked serait de travailler. Appris quelque chose de nouveau. Merci.
InformationsquelleAutor thordarson
40

Car je ne vois pas le jQuery balise dans l'OP, voici une javascript seule 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
        }
    });
});
```
Voir JSFIDDLE
- Vous avez raison, et je upvoted votre réponse chemin du retour quand. J'ai ajouté un jQuery gratuit option à l'aide de la méthode querySelector.
- Pourquoi avez-vous ajouter le trait de soulignement à la _selector variable?
- pas de raison technique. Je crois qu'à l'époque de la réponse que je travaillais avec un client, où toutes les variables dans une fonction commencé avec des traits de soulignement et je suppose que j'ai inconsciemment répondu de la même manière. Il fonctionne sans eux jsfiddle.net/13pog9L8 s'il vous Plaît noter la chose importante à propos de l'utilisation ou non des traits de soulignement dans des variables est la cohérence dans tout le code (la vôtre ou la société pour laquelle vous travaillez)
- Vous pouvez le faire: if (event.cible.checked){ //faire quelque chose }else{ //faire quelque chose }
- il y a mille façons de faire la même chose 😉
InformationsquelleAutor JFK
0

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

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

et vous souhaitez ajouter un EventListener à cette case à cocher à l'aide de javascript dans votre fichier js associé, vous pouvez le faire comme suit:
```
checkbox = document.getElementById('conducted');

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

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

});
```
InformationsquelleAutor SabU
-4

Vous besoin de quelque chose comme ceci:
```
$("input[name='checkbox_name']").click(function() {
...
});
```
InformationsquelleAutor Uzair Farooq

Vous devez vous connecter pour publier un commentaire.

Sans jQuery

Avec jQuery