effectuer une action sur checkbox cochée ou un événement non coché sur le formulaire html
J'ai une case à cocher sur un formulaire qui est désactivée par défaut, comme d'habitude. maintenant, je veux effectuer deux séparés des actions sur activée et désactivée état de cette case.
c'est ma case:
<form>
syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this.id)"/>
</form>
et c'est mon script:
function doalert(id){
if(this.checked) {
alert('checked');
}else{
alert('unchecked');
}
}
juste alertes uncheched!! quelle est la meilleure façon de le faire.
source d'informationauteur shekoufeh
Vous devez vous connecter pour publier un commentaire.
Nous pouvons le faire à l'aide de JavaScript, pas besoin de jQuery. Il suffit de passer le changement de l'élément et laissez JavaScript gérer.
HTML
JS
Démo Ici
js:
Le problème est de savoir comment vous avez connecté l'auditeur:
Inline auditeurs sont effectivement enveloppé dans une fonction qui est appelée avec l'élément ce. Cette fonction appelle la doalert de la fonction, mais n'a pas mis son ce de sorte qu'il sera, par défaut, l'objet global (de la fenêtre dans un navigateur).
Depuis la fenêtre de l'objet n'a pas une vérifié propriété,
this.checked
résout toujours à faux.Si vous voulez ce dans doalert être l'élément, joindre l'auditeur à l'aide de addEventListener:
Ou si vous souhaitez utiliser une ligne auditeur:
Avez-vous essayé d'utiliser le
JQuery
événement de changement?Ensuite, vous pouvez également supprimer
onchange="doalert(this.id)"
de votre case 🙂Edit:
Je ne sais pas si vous utilisez
JQuery
mais si vous n'utilisez pas encore, vous aurez besoin de mettre le script ci-dessous dans votre page de sorte que vous pouvez l'utiliser:Si vous déboguer votre code à l'aide des outils de développement, vous remarquerez que
this
fait référence à l'objet window et non le contrôle d'entrée. Pensez à utiliser le passé dans id pour récupérer l'entrée et vérifierchecked
valeur.Donné que vous utilisez JQuery, vous pouvez faire quelque chose comme ci-dessous :
HTML
JS