全选、不选和反选按钮

今天我看了网易云课堂里面的js入门视频,学会了如何做全选、不选和反选按钮。具体如下:

 <!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<style>
         
		</style>
        <script>
            window.onload=function(){
                var obut=document.getElementById('but1');
                var obut2=document.getElementById('but2');
                var obut3=document.getElementById('but3');
                var odiv=document.getElementById('div1');
                var ofu=odiv.getElementsByTagName('input');
                obut.onclick=function(){
                    for(var i=0;i<ofu.length;i++){
                        ofu[i].checked=true;
                    };
                };
                obut2.onclick=function(){
                    for(var i=0;i<ofu.length;i++){
                        ofu[i].checked=false;
                    };
                };
                obut3.onclick=function(){
                    for(var i=0;i<ofu.length;i++){
                        if(ofu[i].checked==true){
                            ofu[i].checked=false;
                        }else
                        ofu[i].checked=true;
                    };
                };
            };
        </script>
	</head>
	<body>
        <input id="but1" type="button" value="全选" /><br />
        <input id="but2" type="button" value="不选" /><br />
        <input id="but3" 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 />
        </div>
	</body>
</html>
发布了15 篇原创文章 · 获赞 26 · 访问量 7683

猜你喜欢

转载自blog.csdn.net/Big_eyes123/article/details/84328239