ホームページ > 記事 > ウェブフロントエンド > checkBoxラジオ選択効果のJS実装サンプルコード
checkBoxラジオ選択効果のJS実装サンプルコード
- 小云云オリジナル
- 2018-02-27 13:38:565937ブラウズ
この記事では、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>関連する推奨事項:
input:checkbox ラジオと同じラジオ選択効果を実現する複数選択ボックス
リンクラジオ選択効果を実現する JavaScript メソッド_JavaScript スキル
ReactJS のフォームで単一選択、複数選択、および反転選択を実装する方法
以上がcheckBoxラジオ選択効果のJS実装サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。