JavaScript:复选框事件的处理

<!doctype html>
 <html lang = "zh-CN">
 <head>

     <meta charset="utf-8">
     <meta name="description" content="this is a checkbox example">
     <meta name="keywords" content="checkbox,html,js">
     <title>复选框的测试</title>

     <script type="text/javascript">
         window.onload = function () {

             //获取复选框元素
             var checkbox = document.all('checkbox'); //document.all[name]获得
             var checkall = document.getElementById('checkAll');

             /*点击全选按钮全部选中的情况*/
             checkall.addEventListener('click',function(){
                 
                if (checkbox.length == undefined) {//一个选项时,长度是undefined;
                    checkbox.checked = checkall.checked;
                }else{
                     for (var i = 0; i < checkbox.length; i++) {//多个选项时
                         checkbox[i].checked = this.checked;//this指代checkall,checkall选中,将true赋给checkbox[i].checked
                     }
                }
             },false);


             //全部按钮什么时候被自动选中以及自动取消
             if (checkbox.length == undefined) {//一个选项时
                    checkbox.addEventListener('click',function(){
                        checkall.checked = checkbox.checked;
                    },false);
                }else{
                     for (var i = 0; i < checkbox.length; i++) {//多个选项时    
                         checkbox[i].addEventListener('click',function(){
                            for (var i = 0; i < checkbox.length; i++){
                                if (!checkbox[i].checked) {
                                    checkall.checked = false; //全选自动取消
                                    break;
                                }else{
                                    if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选
                                }
                            }
                        },false);
                     }
            }    


             //打印您所有的选择
             document.getElementById('selecteBtn').addEventListener('click',function() {

                     /*一个个去选择时的情况*/
                     var yourchoose = "您选择的爱好有:";
                     if (checkbox.length == undefined) {//一个选项时
                         if (checkbox.checked) yourchoose = yourchoose + checkbox.value;
                     }else{
                         for (var i = 0; i < checkbox.length; i++) {//多个选项时
                             if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";
                         };
                     }
                     alert(yourchoose);    
                 },false);
         }
     </script>

 </head>
 <body>
     <form action="">
         您的爱好有:<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>
         <input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>
         <input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>
         <input type="button" name="selecteBtn" id="selecteBtn" value="选择">
     </form>
 </body>
 </html>
阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭