Afficher le texte lorsque la case est cochée en JavaScript
-
Utiliser la propriété JavaScript
.checkedpour afficher le texte lorsque la case est cochée -
Utilisez la fonction jQuery
is()et la propriété JavaScript.checkedpour afficher le texte lorsque la case est cochée -
Utilisez les événements jQuery
readyetclickpour afficher le texte lorsque la case est cochée
Cet article vous présente les différentes techniques pour afficher du texte lorsque la case à cocher est cochée en JavaScript. Il vous renseigne également sur les fonctions et événements JavaScript et jQuery.
Utiliser la propriété JavaScript .checked pour afficher le texte lorsque la case est cochée
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox</title>
</head>
<body>
<p>Let see how to know if check box is checked:</p>
<label for="check">Checkbox:</label>
<input type="checkbox" id="check" onclick="checkfunction()">
<p id="message" style="display:none">Checkbox is Checked Now!</p>
</body>
</html>
Code JavaScript :
function checkfunction() {
var check = document.getElementById('check');
var message = document.getElementById('message');
if (check.checked == true) {
message.style.display = 'block';
} else {
message.style.display = 'none';
}
}
Production :
Le code donné ci-dessus récupère les éléments en ciblant les valeurs de leur identifiant, check et message. Ensuite, il vérifie si la valeur de check.checked est true ou false.
S’il est true, il affiche le message stocké dans la variable message. Cependant, le .checked est une propriété booléenne qui peut être true ou false.
Nous pouvons utiliser cette propriété dans du JavaScript pur et la combiner avec la fonction jQuery. Reportez-vous à ceci pour plus de détails.
Plutôt que d’afficher le message sur la fenêtre pour indiquer si la case à cocher est cochée ou non, nous pouvons utiliser la fonction alert pour afficher un message contextuel dans le navigateur. Vous pouvez remplacer votre code JavaScript par ce qui suit pour vous entraîner.
Code JavaScript :
function checkfunction() {
if ((document.getElementById('check')).checked) {
alert('The checkbox is checked');
} else {
alert('The checkbox is not checked')
}
}
Production :
Utilisez la fonction jQuery is() et la propriété JavaScript .checked pour afficher le texte lorsque la case est cochée
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Checkbox Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it and Submit
<button onclick="checked()"> Submit </button>
</body>
</html>
Code JavaScript :
function checked() {
if ($('#check').is(':checked')) {
alert('Checked');
} else {
alert('Not Checked');
}
}
Production :
La méthode checked() est exécutée dans le code donné ci-dessus si vous cliquez sur le bouton intitulé Soumettre. Cette méthode récupère le premier élément dont la valeur de l’attribut id est check.
De plus, il vérifie si la propriété checked de l’élément est true ou false. Comment? Ici, la fonction is() vérifie si l’élément sélectionné correspond à l’élément selector.
La fonction is() vérifie l’élément courant avec l’autre élément ; il peut s’agir d’un sélecteur ou d’un objet jQuery.
La méthode is() prend deux paramètres, l’un est obligatoire, et l’autre est optionnel (le selectorElement est obligatoire, et la function(index, element) est optionnelle). Cette fonction renvoie true si la condition satisfait false.
Gardez à l’esprit que $ agit comme document.getElementById ici. Le code ci-dessus affichera Checked si la case à cocher est cochée ; sinon, Not Checked.
Utilisez les événements jQuery ready et click pour afficher le texte lorsque la case est cochée
Code HTML:
<html>
<head>
<title>practice ready and click events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="check"> Check it
</body>
</html>
Code Javascript
$(document).ready(function() {
$('input').click(function() {
alert('You checed....');
});
});
Production :
Les événements ready et click sont des événements jQuery utilisés en JavaScript.
L’événement ready se produit lorsque le modèle d’objet de document (DOM) est chargé. Vous pouvez voir plus de détails sur ready ici.
Le click permet d’affecter l’événement clic à l’élément sélectionné. Dans notre exemple, il s’agit d’une balise input. Vous pouvez lire ici pour plus de détails.
N’oubliez pas que vous ne pouvez utiliser ces événements que si vous souhaitez cocher la case. La raison en est qu’il détecte l’événement click plutôt que de vérifier la propriété checked.
Dans la sortie donnée ci-dessus, vous pouvez observer qu’elle affiche toujours You Checked. Il ne se soucie pas de savoir si vous décochez ou non, mais il détecte simplement si vous cliquez ou non.
Il remarque l’événement click, ce qui est utile pour savoir si la case à cocher est cochée uniquement. Ce ne serait pas un bon choix si vous voulez également savoir si la case est décochée ou non.
