JS实现checkBox的单选效果实例代码

程序员文章站 2022-04-08 21:19:00

...

本文主要和大家分享JS实现checkBoxd的单选效果，简单说就是遍历所有的checkBox复选框，如果有一个已经选中，就将其他的checkBox框置为未选中，以此实现单选的效果，我看到很多博客也写了类似的功能，但大部分都是基于jquery实现的，我这里是原生js实现此功能。

直接贴代码，如下：

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

JS实现checkBox的单选效果实例代码

js 判断checkbox是否选中的实现代码_javascript技巧

使用原生javascript实现分页效果的代码实例

js 实现倒计时效果的实例代码分享

js实现点小图看大图效果的思路及示例代码_javascript技巧

Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

Android listview ExpandableListView实现多选，单选，全选，edittext实现批量输入的实例代码

浅谈JS实现倒计时效果的两种方式（代码示例）

iOS tableView实现单选和多选的实例代码

Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

使用C#实现在屏幕上画图效果的代码实例