Checkbox Function

2018-10-06  本文已影响0人  Jadon7
<!DOCTYPE html>
<html>
<head>
    <title>checkbox function</title>
</head>
<script type="text/javascript">
    window.onload=function()
    {
        var oBtn=document.getElementById('btn');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('allCheckbox');
        var aCh=oDiv.getElementsByTagName('input')
        oBtn.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;
            }

        }

        oBtn3.onclick=function()
        {
            for (var i = 0; i < aCh.length; i++) 
            {
                if (aCh[i].checked===false) 
                {
                    aCh[i].checked=true;
                }
                else
                {
                    aCh[i].checked=false;
                }
            }

        }
        
    }
</script>
<body>
 <input id="btn" type="button" value="all"></br>
 <input id="btn2" type="button" value="allCancel"></br>
 <input id="btn3" type="button" value="contrary"></br>
 <div id="allCheckbox">
     <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>
上一篇下一篇

猜你喜欢

热点阅读