study
/
select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select all exercises</title>
    <script>
        window.onload = function(){
            var All = document.getElementById("All");
            var No = document.getElementById("No");
            var Rev = document.getElementById("Rev");
            var Sub = document.getElementById("Sub");
            var checkAll = document.getElementById("CheckAll");
            var movie = document.getElementsByName("movie");

            // 全选操作
            All.onclick = function(){
                for (var i = 0; i < movie.length; i++) {
                    movie[i].checked = true;

                    CheckAll.checked = true;
                }
            }

            // 全不选操作
            No.onclick = function(){
                for (var i = 0; i < movie.length; i++) {
                    movie[i].checked = false;

                    CheckAll.checked = false;
                }
            }

            // 反选操作（1）
            // Rev.onclick = function(){
            //     for (var i = 0; i < movie.length; i++) {
            //       if(movie[i].checked){
            //           movie[i].checked = false;
            //       }
            //       else{
            //         movie[i].checked = true;
            //       }

            //     }
            // }或者（2）

            // 反选操作（2）
            Rev.onclick = function(){

                CheckAll.checked = true;
                for (var i = 0; i < movie.length; i++) {

                    movie[i].checked = !movie[i].checked;

                    if(!movie[i].checked){
                        CheckAll.checked = false;

                    }

               }

            }


            // 提交操作
            Sub.onclick = function(){
                for(var i = 0; i < movie.length; i++){
                    if(movie[i].checked){
                        alert(movie[i].value)
                    }
                }

            }

            // 全选/全不选
            CheckAll.onclick = function(){

                for (var i = 0; i < movie.length; i++) {
                    if(CheckAll.checked){
                        movie[i].checked = true;
                    }
                    else{
                        movie[i].checked = false;
                    }

                }

            }


            // 单个复选框 全选/全不选
            for (var i = 0; i < movie.length; i++) {
               movie[i].onclick = function(){
                    CheckAll.checked = true;
                   for (var j = 0; j < movie.length; j++) {

                    if(!movie[j].checked){
                       CheckAll.checked = false;
                       break;
                   }

                   }

               }

            }


        }
    </script>

</head>
<body>
    你最喜欢的电视剧或电影是？
    <input type="checkbox" id="CheckAll">全选/全不选
    <br>
    <input type="checkbox" name="movie" value="花千骨">花千骨
    <input type="checkbox" name="movie" value="星你">星你
    <input type="checkbox" name="movie" value="狼少年">狼少年
    <input type="checkbox" name="movie" value="友情以上">友情以上
    <br>
    <button id="All">全选</button>
    <button id="No">全不选</button>
    <button id="Rev">反选</button>
    <button id="Sub">提交</button>
</body>
</html>