Implémentation JS de l'exemple de code d'effet de sélection radio checkBox-js tutoriel-php.cn

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

小云云

Libérer： 2018-02-27 13:38:56

original

5970 Les gens l'ont consulté

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>

Copier après la connexion

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!