ホームページ > 記事 > ウェブフロントエンド > JavaScriptで全選択を設定する方法
JavaScriptで全選択を設定する方法
- 藏色散人オリジナル
- 2021-06-27 10:30:222554ブラウズ
JavaScript で全選択を設定する方法: 最初に HTML サンプル ファイルを作成し、次にスクリプト タグを追加して JS コードを作成し、最後に各チェックボックス オブジェクトをループし、その selected 属性を true に設定して選択を実現します。すべての機能が可能です。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript ですべて選択を設定するにはどうすればよいですか?
JavaScript は、すべて選択を実装します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbox的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>
</html>Checkbox オブジェクト:
Checkbox オブジェクトは、HTML フォームの選択ボックスを表します。
HTML ドキュメントでは、2213c9627c391f00ef101b1592023bcb が表示されるたびに Checkbox オブジェクトが作成されます。
選択ボックスにアクセスするには、フォームの elements[] 配列を反復処理するか、 document.getElementById() を使用します。
checked プロパティ:
checked プロパティは、チェックボックスをチェックするかどうかを設定または返します。
構文
checkboxObject.checked=true|false
説明
この属性は、チェックボックスの現在の状態を保存します。この値が変更されるたびに、onclick イベント ハンドラーがトリガーされます (場合によっては、onchange イベント ハンドラーがトリガーされます)。 。
[推奨学習: JavaScript 上級チュートリアル]
以上がJavaScriptで全選択を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。