JS implementation of checkBox radio selection effect example code-JS Tutorial-php.cn

JS implementation of checkBox radio selection effect example code

小云云

Release： 2018-02-27 13:38:56

Original

6014 people have browsed it

This article mainly shares with you the radio selection effect of JS to implement checkBoxd. Simply put, it traverses all checkBox check boxes. If one is selected, set the other checkBox boxes to unchecked to achieve single selection. As for the effect, I have seen many blogs writing similar functions, but most of them are based on jquery. Here I use native js to implement this function.

Post the code directly, as follows:

<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>

Copy after login

Related recommendations:

##input: checkbox multi-select box achieves the same single selection effect as radio

Javascript method to achieve link radio selection effect_javascript skills

How to implement single-selection, multi-selection and inverse selection of forms in ReactJS

The above is the detailed content of JS implementation of checkBox radio selection effect example code. For more information, please follow other related articles on the PHP Chinese website!