TUTOS.EU

Tester si une case est cochée ou non en JavaScript

Regarder si une case est cochée ou non en JavaScript

Le code ci-dessous affichera 2 champs de saisi avec une case à cocher situé à côté. Le fait de cliquer sur un champ de saisi déclenchera une fonction Javascript qui indiquera si la case situé à proximité est cochée ou non

Le code situé en base de page permet d'avoir les champs de saisi avec la case à cocher et l'appel de la fonction Javascript

<p><input type="text" name="Input1" id="Input1" value="Cliquez ici pour tester la valeur de la première case à cocher" size="70" onclick="fctControleCheckboxCocheeOuNon(1);">
<input TYPE=CHECKBOX UNCHECKED name="Checkbox1" id="Checkbox1" value="Pouet" type="CHECKBOX"></p> 
<p><input type="text" name="Input2" id="Input2" value="Cliquez ici pour tester la valeur de la seconde case à cocher" size="70" onclick="fctControleCheckboxCocheeOuNon(2);">
<input TYPE=CHECKBOX CHECKED name="Checkbox2" id="Checkbox2" value="Plop" type="CHECKBOX"></p>
Lien vers le fichier : cliquez ici Copier le code

Basiquement le code Javascrip qui permet de contrôler si la case est cochée ou non est :

function fctControleCheckboxCocheeOuNon(MyObjNumber)
{
	varMaValeur = recupValeurElement("Checkbox" + MyObjNumber);
	//alert("Valeur : " + varMaValeur.id);
	alert("Valeur : " + varMaValeur.checked);
	
}
Lien vers le fichier : cliquez ici Copier le code

Le code de la page complète :

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>

		<meta charset="utf-8" />
		
		<LINK rel="stylesheet" type="text/css" href="../style.css">

		<title>Titre du site</title>
		<meta name="Description" content="Description du site"/>
		<meta name="author" content="Bob l'éponge" />
		<meta name="Keywords" content="a, b, c"/>

		<SCRIPT TYPE="text/javascript">
			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}
			function fctControleCheckboxCocheeOuNon(MyObjNumber)
			{
				varMaValeur = recupValeurElement("Checkbox" + MyObjNumber);
				//alert("Valeur : " + varMaValeur.id);
				alert("Valeur : " + varMaValeur.checked);
				
			}
		</SCRIPT>

	</HEAD>

	<BODY>

		<div id="bloc_page"

			<p><input type="text" name="Input1" id="Input1" value="Cliquez ici pour tester la valeur de la première case à cocher" size="70" onclick="fctControleCheckboxCocheeOuNon(1);">
			<input TYPE=CHECKBOX UNCHECKED name="Checkbox1" id="Checkbox1" value="Pouet" type="CHECKBOX"></p> 
			<p><input type="text" name="Input2" id="Input2" value="Cliquez ici pour tester la valeur de la seconde case à cocher" size="70" onclick="fctControleCheckboxCocheeOuNon(2);">
			<input TYPE=CHECKBOX CHECKED name="Checkbox2" id="Checkbox2" value="Plop" type="CHECKBOX"></p> 
		</div> <!-- div bloc_page -->
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Article(s) suivant(s)

Cocher une case avec du JavaScript

2