JavaScript：复选框事件的处理

最新推荐文章于 2023-07-15 16:58:26 发布

恩洛

最新推荐文章于 2023-07-15 16:58:26 发布

阅读量1.1k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>