javascript 全选练习

最新推荐文章于 2022-05-22 23:24:46 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2022-05-22 23:24:46 发布

阅读量210

点赞数 1

本文链接：https://blog.csdn.net/weixin_43889484/article/details/104025482

版权

今天晚上看了下尚硅谷的JavaScript教学视频，学习了一下一点小东西，把它贴出来与大家分享一下

代码：

<html>
    <head>
        <style>
            
        </style>

        <script>
            window.onload=function(){
                var items=document.getElementsByName('items');
                //全选
                var checkAllbtn=document.getElementById('checkAllbtn');
                checkAllbtn.onclick=function(){
                    
                    for(var i=0;i<items.length;i++){
                        items[i].checked=true;
                    }
                    checkAllBox.checked=true;
                }
                //全不选

                var checkNobtn=document.getElementById('checkNobtn');
                checkNobtn.onclick=function(){
                   
                    for(var i=0;i<items.length;i++){
                        items[i].checked=false;
                    }
                    checkAllBox.checked=false;
                }

                //反选

                var checkRevbtn=document.getElementById('checkRevbtn');
                checkRevbtn.onclick=function(){
                    checkAllBox.checked=true;
                    for(var i=0;i<items.length;i++){
                        
                        items[i].checked=!items[i].checked;
                        if(!items[i].checked){
                            checkAllBox.checked=false;
                        }
                    }
                    
                }

                //提交
                var sendBtn=document.getElementById('sendBtn');
                sendBtn.onclick=function(){
                    
                    for(var i=0;i<items.length;i++){
                        if(items[i].checked){
                            alert(items[i].value)
                        }
                    }
                }

                //多选框
                //状态同步
                var checkAllBox =document.getElementById('checkAllBox');
                checkAllBox.onclick=function(){
                    
                    for(var i=0;i<items.length;i++){
                        items[i].checked=this.checked;
                    }
                }

                //逐个点击，状态同步
                for(var i=0;i<items.length;i++){
                    
                    items[i].onclick=function(){
                        checkAllBox.checked=true;
                        for(var j=0;j<items.length;j++){
                            if(!items[j].checked){
                                checkAllBox.checked=false;
                                break;
                            }
                        }
                    }
                }

            }
        </script>
    </head>
    <body>
        <form method="POST" action="">
            你爱好的运动是：<input type="checkbox" id="checkAllBox"/>全选/全不选
            <br/>

            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="蓝球"/>篮球
            <input type="checkbox" name="items" value="乒乓球"/>乒乓球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <br/>
            <input type="button" id="checkAllbtn" value="全选"/>
            <input type="button" id="checkNobtn" value="全不选"/>
            <input type="button" id="checkRevbtn" value="反选"/>
            <input type="button" id="sendBtn" value="提交"/>
        </form>
    </body>
</html>

效果可以自己运行一下，里面的逻辑还是很适合我们这种初学者学习的。。