Comment réinitialiser des cases à cocher HTML radio ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-01-15 08:45:42

Question

Bonjour, j'ai un groupe de cases à cocher du type radio. Comment puis-je réinitialiser ces cases de telle façon qu'aucune case de soit cochée.

<input type="radio" name="cases" value="0">
<input type="radio" name="cases" value="1">
<input type="radio" name="cases" value="2">

Réponse

Pour réinitialiser des cases à cocher HTML du type radio button, vous pouvez utiliser JavaScript pour identifier les balises <input> du type radio qui portent le même nom, puis utiliser une boucle for pour parcourir les cases, et décocher la case qui est cochée.

Pour détecter celle qui est cochée, on utilise la propriété checked.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment réinitialiser des cases à cocher HTML radio ?</title>
</head>
<body>
<input type="radio" name="cases" value="0">
<input type="radio" name="cases" value="1">
<input type="radio" name="cases" value="2">
<input type="button" onclick="resetCases('cases');" value="Réinitialiser">
<script>
function resetCases(nom){
var element = document.getElementsByName(nom);
for(var i=0;i<element.length;i++)
element[i].checked = false;
}
</script>
</body>
</html>