자바스크립트에서 모두 선택을 설정하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 모두 선택을 설정하는 방법

藏色散人

풀어 주다： 2021-06-27 10:30:48

원래의

2669명이 탐색했습니다.

Javascript에서 모두 선택을 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 스크립트 태그를 추가하고 js 코드를 만듭니다. 마지막으로 각 확인란 개체를 반복하고 해당 체크 속성을 true로 설정하여 모두 선택 기능을 구현합니다.

자바스크립트에서 모두 선택을 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 모두 선택을 설정하는 방법은 무엇입니까?

모두 선택의 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 문서에서는 가 나타날 때마다 Checkbox 개체가 생성됩니다.

양식의 elements[] 배열을 반복하거나 document.getElementById() 를 사용하여 선택 상자에 액세스할 수 있습니다.

checked 속성:

checked 속성은 체크박스를 선택해야 하는지 여부를 설정하거나 반환합니다.

Syntax