<! DOCTYPE html로>
<HTML LANG = "EN">
<head>
<메타 캐릭터 = "UTF-8">
<메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1.0">
<META HTTP-EQUIV = "X-UA-지원"내용 = "즉 = 엣지">
<TITLE> 문헌 </ TITLE>
</ head>
<body>
<input 타입 = "체크 박스"> 全 选
<DIV 클래스 = "상자">
<input 타입 = "체크 박스"> 1로 <br>
<input 타입 = "체크 박스"> 2로 <br>
<input 타입 = "체크 박스"> 3로 <br>
<input 타입 = "체크 박스"> 4로 <br>
</ DIV>
<script>
VAR의 INP = document.querySelector ( '입력');
VAR의 INPS document.querySelector = ( '박스.') querySelectorAll ( '입력.');
// 전체 상자에 이벤트를 추가
inp.onclick = 함수 () {
// 루프 4 작은 상자, 4 작은 체크 박스 상태와 일치 전체 상자가 선택하기
위한 VAR (I = 0; i가 inps.length를 <; 내가 ++) {
INPS [I] = .checked를 this.checked;
}
}
모든 작은 상자에 // 아래 클릭 이벤트를 추가합니다
위한 VAR (I = 0; i가 inps.length를 <; 내가 ++) {
INPS [I] = .onclick 함수 () {
// 모든 버튼을 모두 선택 플래그 제어 여부를 선택
플래그는 = 사실이었다;
각 버튼이 선택되어 있는지 여부를 확인 //
위한 VAR (I = 0; i가 inps.length를 <; 내가 ++) {
// 버튼의 존재가 선택되지 않고, 플래그 = flase 그렇지 않으면 플래그 = TRUE;
만약 (! INPS [I] .checked를) {
플래그 = 거짓;
단절;
}
}
inp.checked = 플래그;
}
}
</ script>
</ body>
</ HTML>