checkBoxラジオ選択効果のJS実装サンプルコード-jsチュートリアル-php.cn

checkBoxラジオ選択効果のJS実装サンプルコード

小云云

リリース： 2018-02-27 13:38:56

オリジナル

5970 人が閲覧しました

この記事では、JS を使用して checkBoxd の単一選択効果を実装する方法を主に説明します。簡単に言えば、1 つのチェックボックスが選択されている場合は、他のチェックボックスを選択解除して単一選択効果を実現します。同様の関数を書いているブログをたくさん見てきましたが、そのほとんどは 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>

ログイン後にコピー