Comment limiter le nombre de cases checkbox cochées en JavaScript ?
Bonjour, comment faire pour limiter le nombre de cases checkbox à cocher en JavaScript ? Comment faire si par exemple j'ai 5 cases, et que je veux autoriser uniquement 3 cases maximum à être cochées ?
Pour limiter le nombre de cases checkbox cochées, en JavaScript, vous pouvez attribuer une CLASS identique à toutes les cases, puis itérer chaque case, et vérifier si elle est cochée.
Si le nombre de cases cochées dépasse le nombre maximum, on ne coche plus les cases suivantes.
Pour récupérer toutes les cases on utilise la méthode document.getElementsByClassName puis on crée un boucle for pour parcourir toutes les cases une par une. Lorsque l'attribut checked d'une case équivaut à true, c'est que la case est cochée, alors on incrémente de 1 une variable nommée ici z.
Il suffit ensuite de vérifier si la valeur de la variable z a atteint la valeur de 3 ; si c'est le cas on ne coche plus les autres cases.
Voici un exemple pour limiter le nombre de cases checkbox cochées à 3 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment limiter le nombre de cases checkbox cochées en JavaScript ?</title>
</head>
<body>
<input type="checkbox" class="case" onClick="doAction()"> Case 1
<br>
<input type="checkbox" class="case" onClick="doAction()"> Case 2
<br>
<input type="checkbox" class="case" onClick="doAction()"> Case 3
<br>
<input type="checkbox" class="case" onClick="doAction()"> Case 4
<br>
<input type="checkbox" class="case" onClick="doAction()"> Case 5
<script>
function doAction() {
var max = 3;
var z = 0;
var checkboxes = document.getElementsByClassName("case");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes.item(i).checked == true) {
z++
if (z > max) {
checkboxes.item(i).checked = false;
}
}
}
}
</script>
</body>
</html>