全选反选 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                //拿到全部水果
                var Allsg = document.getElementsByName("sg");
                //拿到全选按钮
                var BtnA = document.getElementsByName("All")[0];
                for (let i = 0; i < Allsg.length; i++) {
                    if(Allsg[i].checked === true){
                        BtnA.checked = true;
                    }
                }
                BtnA.onclick = function() {
                    for (let i = 0; i < Allsg.length; i++) {
                        Allsg[i].checked = true;
                    }
                }
                document.getElementsByName("noAll")[0].onclick = function() {
                    for (let i = 0; i < Allsg.length; i++) {
                        Allsg[i].checked = false;
                        BtnA.checked = false;
                    }
                }
                var resBtn = document.getElementsByName("noresAll")[0];
                resBtn.onclick = function(){
                    //拿到当前的所有水果
                    for (let i = 0; i < Allsg.length; i++) {
                        console.log(Allsg[i].checked);
                        if(Allsg[i].checked === true){
                            Allsg[i].checked = false;
                        }else{
                            Allsg[i].checked = true;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>

        苹果：<input type="checkbox" name="sg" value="苹果">
        香蕉：<input type="checkbox" name="sg" value="香蕉">
        梨子：<input type="checkbox" name="sg" value="梨子">
        <br>
        全选：<input type="checkbox" name="All">
        <br>
        全不选：<input type="checkbox" name="noAll">
        <br>
        反选：<input type="checkbox" name="noresAll">
    </body>
</html>

 

posted @ 2022-03-22 17:21  st-159  阅读(65)  评论(0)    收藏  举报