首頁 > web前端 > js教程 > 主體

JS實作checkBox的單選效果實例程式碼

小云云
發布: 2018-02-27 13:38:56
原創
5970 人瀏覽過

本文主要和大家分享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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!