<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
</ head>の
<身体>
<input type = "チェックボックス">全选
<DIV CLASS = "箱">
<input type = "チェックボックス"> 1 <BR>
<input type = "チェックボックス"> 2 <BR>
3 <BR>の<input type = "チェックボックス">
<input type = "チェックボックス"> 4 <BR>
</ div>
<スクリプト>
VaRのINP = document.querySelector（ '入力'）。
VaRのINPS = document.querySelector（ 'ボックス。 '）querySelectorAll（' 入力'）。
//全体のボックスにイベントを追加
inp.onclick =関数（）{
//ループ4小箱、4つの小さなチェックボックスにチェック状態と一貫性のある全体のボックスを作ります
ため（VAR i = 0; iはinps.lengthを<; iは++）{
INPS [I] = .checkedをthis.checked。
}
}
//追加するには、以下のすべての小さな箱にイベントをクリックしてください
ため（VAR i = 0; iはinps.lengthを<; iは++）{
INPS [i]は.onclick =関数（）{
//すべてのボタンは、すべてを選択し制御するフラグを選択するかどうか
フラグ=真でした。
//各ボタンが選択されているかどうかを決定します
ため（VAR i = 0; iはinps.lengthを<; iは++）{
//ボタンの存在が選択されていない、フラグ= flase、そうでなければフラグ= TRUE。
（もし！INPS [i]を.checkedを）{
フラグ= falseは、
ブレーク;
}
}
inp.checked =フラグ。
}
}
</ SCRIPT>
</ BODY>
</ HTML>