recherche

Maison >interface Web >js tutoriel >Implémentation JS de l'exemple de code d'effet de sélection radio checkBox

Implémentation JS de l'exemple de code d'effet de sélection radio checkBox

小云云
小云云original
2018-02-27 13:38:566036parcourir

Cet article partage principalement avec vous l'effet de sélection radio de JS pour implémenter checkBoxd. En termes simples, il traverse toutes les cases à cocher checkBox. Si l'une est sélectionnée, désactivez les autres cases pour obtenir une sélection unique. , j'ai vu de nombreux blogs écrire des fonctions similaires, mais la plupart d'entre elles sont basées sur jquery. Ici, j'utilise du js natif pour implémenter cette fonction.

Publiez le code directement, comme suit : 

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
         <table cellpadding="10" cellspacing="1" width="70%" border="1" align="center">
		   <tr >
                <td align="center"> 个人税收居民身份声明</td>
            </tr>
			<tr >
			   <td>本人声明：</td>
			</tr>
			<tr >
			   <td>
				<input type="checkBox"  name="statement" id="1" onclick="selectCheckOne(this)">1.声明1 </td>
			</tr>
			<tr >
				<td>
				<input type="checkBox"  name="statement" id="2" onclick="selectCheckOne(this)">2.声明2</td>
			</tr>
			<tr >
				<td>
				<input type="checkBox"  name="statement" id="3" onclick="selectCheckOne(this)">3.声明3</td>
			</tr>
		</table>
</body>


<script>	
function selectCheckOne(obj){
	var checks = document.getElementsByName("statement");
	if(obj.checked){
		for( var i=0;i<checks.length;i++){
		checks[i].checked=false;
		}
		obj.checked=true;
	}else{
		for( var i=0;i<checks.length;i++){
		checks[i].checked=false;
		}
	}
}
</script>
</html>

Recommandations associées :

saisie : case à cocher case à sélection multiple pour atteindre effet de sélection unique et suivre Identique à la radio

Méthode Javascript pour obtenir des compétences d'effet de sélection radio de lien_javascript

Comment mettre en œuvre une sélection unique, plusieurs sélection et sélection inverse de formulaires dans ReactJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code jQuery pour obtenir l'âge en fonction de la date de naissanceArticle suivant：Code jQuery pour obtenir l'âge en fonction de la date de naissance

Articles Liés

Voir plus