HOWTO · JavaScript
Obtenir la valeur de la case à cocher cochée en JavaScript
Comment obtenir la valeur de la case à cocher cochée
Sur cette page
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.
