JavaScript-选择项中的全选、全不选、反选

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
    window.onload=function(){
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('div1');
        var aCh=document.getElementsByTagName("input");

        //点击全选按钮后，全部选中
        oBtn1.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            aCh[i].checked=true;
        }

        //点击不选按钮后，选择全部取消
        oBtn2.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            aCh[i].checked=false;
        }

        //点击反选按钮后，选择项取消，未被选择项选择
        //注意if语句里使用的是双等号，属于判断
        //其他语句里是单等，属于赋值
        oBtn3.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            if(aCh[i].checked==true)
            {
            aCh[i].checked=false;
            }else{
            aCh[i].checked=true;
            }
        }
    }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="全选"/>
    <input id="btn2" type="button" value="不选"/>
    <input id="btn3" type="button" value="反选"/>
<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>
    <div id="btn"></div>
</div>
</body>
</html>
JavaScript-选择项中的全选、全不选、反选

猜你喜欢
