代码改变世界

html 全选或全不选小案例

2016-12-08 20:25  甘雨路  阅读(642)  评论(1)  编辑  收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>lf</title>
        <script type="text/javascript">
            function selectAllOrNo(){
                
                var choice = document.getElementById("choose");
                //根据对应的状态全选或全不选
                if(choice.checked==true){
                    selectAll();
                }else{
                    noSelect();
                }
            }
            
            function selectAll(){
                var choice = document.getElementById("choose");
                choice.checked=true;
                
                //获取interest的复选框
                var interests = document.getElementsByName("interest");
                // 遍历
                for(var i = 0; i<interests.length;i++){
                    var interest = interests[i];
                    interest.checked = true;
                }
            }
            
            function noSelect(){
                var choice = document.getElementById("choose");
                choice.checked=false;
                //获取interest的复选框
                var interests = document.getElementsByName("interest");
                // 遍历
                for(var i = 0; i<interests.length;i++){
                    var interest = interests[i];
                    interest.checked = false;
                }
            }
            
            function selectOther(){
                var choice = document.getElementById("choose");
                choice.checked=true;
                //获取interest的复选框
                var interests = document.getElementsByName("interest");
                // 遍历
                for(var i = 0; i<interests.length;i++){
                    var interest = interests[i];
                    interest.checked = !interest.checked;
                    // 如果存在未选择，则设置全选/全不选为不选择状态
                    checkSelect();
                }
                
            }
            // 如果存在未选择，则设置全选/全不选为不选择状态
            function checkSelect(){
                
                var choice = document.getElementById("choose");
                choice.checked=true;
                //获取interest的复选框
                var interests = document.getElementsByName("interest");
                // 遍历
                for(var i = 0; i<interests.length;i++){
                    var interest = interests[i];
                    // 如果存在未选择，则设置全选/全不选为不选择状态
                    if(interest.checked==false){
                        choice.checked=false;
                    }
                }
            }
    </script>
    </head>
    <body>
          你爱好的运动是？
        <input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>
        
        <input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球
        <input type="checkbox" name="interest" value="篮球"  onchange="checkSelect()"/>篮球
        <input type="checkbox" name="interest" value="羽毛球"  onchange="checkSelect()"/>羽毛球
        <input type="checkbox" name="interest" value="乒乓球"  onchange="checkSelect()"/>乒乓球
        <br>
         <input type="button" value="全选" onclick="selectAll();"/>
         <input type="button" value="全不选" onclick="noSelect();"/>
         <input type="button" value="反选" onclick="selectOther();"/>
    </body>
</html>