一个关于勾选框的练习

有几个checkedbox和几个button,

你需要通过js的方式来达到按button时达成某些效果

原文代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style type="text/css">
        div{
            
            text-align: center;
            
        }
    </style>
    
    
    
    <script type="text/javascript">
        window.onload = function(){
            var all = document.getElementById("checkall");
            var notall = document.getElementById("notcheckall");
            var reverse = document.getElementById("reverse");
            var alert2 = document.getElementById("alert");
            
            
            
            var sport = document.getElementsByName("sport");
            all.onclick = function(){
                for(var start = 0;start < sport.length;start++){
                    sport[start].checked = true;
                }
                alert("checked all");

            };
            
            notall.onclick = function(){
                for(var start = 0;start < sport.length;start++){
                    sport[start].checked = false;
                }
                alert("not checked all");
            
            };
            reverse.onclick = function(){
                for(var start = 0;start < sport.length;start++){
                    if(sport[start].checked == true){
                        sport[start].checked = false;
                        
                    }else{
                        sport[start].checked = true;
                    }
                }
                alert("reverse");
            
            };
            alert2.onclick = function(){            
                alert("提交了哦!");        
            };
        }
    </script>
    
    
    
    </head>
    
    <body>
        <div id="text">
            <a >你最喜欢的运动是?</a>
        </div>
        <br />
        <div id="">
            <input type="checkbox" name="sport" id="first" value="篮球" />篮球
            <input type="checkbox" name="sport" id="first" value="足球" />足球
            <input type="checkbox" name="sport" id="first" value="羽毛球" />羽毛球
            <input type="checkbox" name="sport" id="first" value="乒乓球" />乒乓球
        </div>
        <br />
        <div id="">
            <button id="checkall"type="button">全选</button>
            <button id="notcheckall"type="button">全不选</button>
            <button id="reverse"type="button">反选</button>
            <button id="alert"type="button">提交</button>
        </div>
        
    </body>
</html>

需要注意的是,在选择勾选框的是否打钩属性需要用到checkedbox的checked属性

当这个属性为true时就是打钩的,当为false时就是不打勾

上一篇:TZOJ 3295 括号序列(区间DP)


下一篇:js 数组对照筛选