Obtenir la valeur de la case à cocher cochée en JavaScript
- Vérifier si une case à cocher est cochée en JavaScript
-
Obtenir des valeurs de
case à cocher -
Obtenir les valeurs de plusieurs cases à cocher sélectionnées à l’aide de
querySelectorAll()en JavaScript -
Obtenir la valeur de plusieurs cases à cocher sélectionnées à l’aide de la méthode
getElementById()en JavaScript
Cet article vous aidera à utiliser JavaScript pour vérifier si une case à cocher est cochée, obtenir les valeurs des cases cochées et sélectionner/désélectionner toutes les cases à cocher.
Vérifier si une case à cocher est cochée en JavaScript
Il existe deux états pour la case à cocher : cochée et décochée.
Vous pouvez suivre ces procédures pour déterminer l’état d’une case à cocher.
- Pour commencer, utilisez une
technique DOMcommegetElementById()ouquerySelector()pour choisir la case à cocher. - Ensuite, accédez à la propriété cochée de l’élément case à cocher. La case à cocher est cochée si sa propriété cochée est réelle ; sinon, ce n’est pas le cas.
Le code suivant le montre avec la méthode querySelector().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
Dans cet exemple,
Vous pouvez d’abord créer un élément de case à cocher Html.
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>
Deuxièmement, examinez l’attribut coché de la case à cocher avec id #submit.
const js = document.querySelector('#submit');
console.log(js.checked);
Le résultat affiché dans la console sera false car la case est décochée.
false
Si la case est cochée, elle affichera true dans la console.
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="submit">
<input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
</label>
<script>
const js = document.querySelector('#submit');
console.log(js.checked);
</script>
</body>
</html>
Vous verrez Output comme true dans la console.
true
Obtenir des valeurs de case à cocher
Une checkbox et un button peuvent être trouvés sur la page suivante. La valeur de la case à cocher s’affichera dans la fenêtre de la console lorsque vous cliquerez sur le bouton :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkbox</title>
</head>
<body>
<label for="payment">
<input type="checkbox" id="payment" name="payment"> Payment
</label>
<button id="bt">Submit</button>
<script>
const js = document.querySelector('#payment');
const bt = document.querySelector('#bt');
bt.onclick = () => {
alert(js.value);
};
</script>
</body>
</html>
Que la case soit cochée ou non, vous obtenez toujours la chaîne on lorsque vous obtenez la propriété value d’une case à cocher.
Obtenir les valeurs de plusieurs cases à cocher sélectionnées à l’aide de querySelectorAll() en JavaScript
Trois cases à cocher se trouvent sur la page suivante. Lorsque vous cochez une ou plusieurs cases et appuyez sur le bouton, les valeurs des cases sélectionnées s’affichent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Checkboxes</title>
</head>
<body>
<p>Select your favorite subject:</p>
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
<p>
<button id="bt">Get Selected subject</button>
</p>
<script>
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
</script>
</body>
</html>
Voici comment cela fonctionne.
Nous créons trois éléments de case à cocher en HTML avec le même nom (couleur) mais des valeurs différentes.
<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
En JavaScript:
- Pour commencer, ajoutez ce qui suit au gestionnaire d’événements de clic du bouton :
- Deuxièmement, utilisez le document pour sélectionner les cases à cocher spécifiées. Dans le gestionnaire d’événements click, utilisez la méthode querySelectorAll() :
- Troisièmement, créez un tableau avec les valeurs des cases à cocher sélectionnées :
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
let output = [];
checkboxes.forEach((checkbox) => {
output.push(checkbox.value);
});
alert(output);
});
Obtenir la valeur de plusieurs cases à cocher sélectionnées à l’aide de la méthode getElementById() en JavaScript
Vous allez maintenant apprendre à obtenir toutes les valeurs des cases à cocher de l’utilisateur à l’aide de la méthode getElementById(). Jetez un oeil à l’exemple ci-dessous.
<html>
<body>
<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
document.write(result);
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result").innerHTML = "please,select any one";
}
return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>
</body>
</html>
Production :
En exécutant ce code, nous obtiendrons une réponse similaire à celle ci-dessous, où vous pourrez sélectionner les sujets qui vous sont familiers.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn