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

感谢参阅!

猜你喜欢

转载自blog.csdn.net/lm891108647/article/details/79384596