全选全不选（优化） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                var sg = document.getElementsByName("sg");
                function checked(num) {
                    for (let i = 0; i < sg.length; i++) {
                        switch (num) {
                            case 1:
                                sg[i].checked = true;
                                break;
                            case 2:
                                sg[i].checked = false;
                                break;
                            case 3:
                                sg[i].checked = !sg[i].checked;
                        }
                    }
                }
                document.getElementsByName("All")[0].onclick = function() {
                    checked(1);
                }
                document.getElementsByName("noAll")[0].onclick = function() {
                    checked(2)
                }
                document.getElementsByName("noresAll")[0].onclick = function() {
                    checked(3)
                }
            }
        </script>
    </head>
    <body>
        苹果：<input type="checkbox" name="sg" value="苹果">
        香蕉：<input type="checkbox" name="sg" value="香蕉">
        梨子：<input type="checkbox" name="sg" value="梨子">
        <br>
        <input type="button" name="All" value="全选">
        <input type="button" name="noAll" value="全不选">
        <input type="button" name="noresAll" value="反选">
    </body>
</html>

 

posted @ 2022-03-28 13:38  st-159  阅读(44)  评论(0)    收藏  举报