开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript:复选框事件的处理

简介:
+关注继续查看

复选框事件的处理

  复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。

范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮的状态根据选中的选项个数自动变化,即全选按钮的状态会自动取消或者自动勾选。

复制代码
<!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');
             var checkall = document.getElementById('checkAll');

             /*点击全选按钮全部选中的情况*/
             checkall.addEventListener('click',function(){
                 
                if (checkbox.length == undefined) {//一个选项时
                    checkbox.checked = checkall.checked;
                }else{
                     for (var i = 0; i < checkbox.length; i++) {//多个选项时
                         checkbox[i].checked = this.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>
复制代码

效果截图如下:

默认状态时:    

没有全选时:  

 

 全选时:

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5833870.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
剑指Offer——正则表达式匹配(JS实现)
剑指Offer——正则表达式匹配(JS实现)
65 0
Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来 的,包含XY坐标信息的,通过graphic和graphiclayer 的方式添加到地图上,其中有一个对象的数量很多,上万了吧,通过上述的方式无法在地图上进行展示,就想到了聚类,当时由于技术和时间的关系,没有实现,最 近,稍微有点先下时间,就又想起这事,继续研究,终于,皇天不负有心人,出来了,出来的第一时间写出来,以便大家使用。
1101 0
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇       守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨。
881 0
js template实现方法
培训类型:入园-家长会 待回访 ...
852 0
网站实现特定某个地区访问执行跳转(js方法)
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
814 0
asp.net WebService实现跨域js调用功能实现
1、Web.Config中增加如下红色标记部分配置:                                                               2、增加一...
815 0
ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
原文:ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测 一、开篇      在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二、关于ArcGIS JS 版本选择      在写这篇博客时ArcGIS JS 4.0正式版已经发布。
1393 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载