JS實作checkBox的單選效果實例程式碼
- 小云云原創
- 2018-02-27 13:38:565971瀏覽
本文主要和大家分享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技巧
以上是JS實作checkBox的單選效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn