JavaScript實現全選、不選、反選功能

原創

2020-02-21 07:48

點擊全選按鈕，下面的列表項會被全部選擇；
點擊不選按鈕，選項全部取消選擇；
先在列表中選擇幾項，再點擊反選按鈕，之前被選擇的會取消選擇，之前沒被選擇的會變成選擇狀態。

下面是實現代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hh</title>
<script type="text/javascript">
    window.οnlοad=function(){
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('div1');
        var oCh=oDiv.getElementsByTagName('input');
        oBtn1.οnclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
            oCh[i].checked=true;
            }           
        };

        oBtn2.οnclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
            oCh[i].checked=false;
            }           
        };
        oBtn3.οnclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
                if (oCh[i].checked==true)
                    oCh[i].checked=false;
                else
                    oCh[i].checked=true;
            }           
        };
    };

</script>
</head>

<body>
<input id="btn1" type="button" value="全選">
<input id="btn2" type="button" value="不選">
<input id="btn3" type="button" value="反選"><br>

<div id="div1">
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
</div>
</body>
</html>