今日头条 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 软件开发 » 正文

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

放大字体  缩小字体 发布日期:2018-02-27  来源:企业800网  作者:新格网  浏览次数:206  【去百度看看】
核心提示:本文主要和大家分享JS实现checkBoxd的单选效果,简单说就是遍历所有的checkBox复选框,如果有一个已经选中,就将其他的checkBox框置为未选中,以此实现单选的效果,我看到很多博客也写了类似的功能,但大部分都是基于jquery实现的,我这里是原生js实现此功能。
本文主要和大家分享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>

相关推荐:

input:checkbox多选框实现单选效果跟radio一样

javascript实现链接单选效果的方法_javascript技巧

ReactJS中表单的单选多选与反选的实现方法

以上就是JS实现checkBox的单选效果实例代码的详细内容,更多请关注php中文网其它相关文章!

 
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 吉ICP备11001726号-6
企业800网 · 提供技术支持