复选框事件的处理

　　复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用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>

效果截图如下：

默认状态时：　　　

没有全选时：

全选时：

JavaScript：复选框事件的处理的更多相关文章

  1. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  2. MUI - 复选框、单选框、使用js获取选择值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

    0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...

  4. ztree点击节点实现选中/取消复选框

    效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理

  5. element-ui 复选框,实现点击表格当前行选中或取消

    背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...

  6. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

  8. javascript实现复选框的全选全不选

    通过复选框的id获取到复选框 元素 对复选框绑定点击事件 每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态 当点击全选全不选checkbox时,检查 ...

  9. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 四、saltstack如何管理对象？

    实验前环境: [root@super65 ~]# salt-key -L[root@super65 ~]# salt-key -a super65.cn -y salt管理对象简介: saltstac ...

  2. 应用服务器上部署自己的 blog 和 wiki 组件。

    协作性应用程序 这就是 Web 2.0 的全部,尽管该术语出现才几乎一年的时间,但现在好像只有烹饪杂志还没有加入到讨论 Web 2.0 未来出路的行列中.自从出现了里程碑式的文章 "What ...

  3. 内核Makefile编写

    对于大部分内核模块或设备驱动的开发者和使用者来说,最常接触到的就是各层目录下基于kbuild架构的kbuild Makefile文件.主要部分有:1.目标定义,目标定义就是用来定义哪些内容要做为模块编 ...

  4. LightOJ 1188 Fast Queries（简单莫队）

    1188 - Fast Queries    PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 64 MB Gi ...

  5. OpenGL extension specification (from openGL.org)

    Shader read/write/atomic into UAV global memory (need manual sync) http://www.opengl.org/registry/sp ...

  6. ajax参数传递时中文乱码问题

    ajax传递参数时,一般就是js向程序页面传递和程序向js文件传递两种情况,当出现中文汉字时,会出现乱码. 因为存在上述两种情况,所以解决起来也要分开对待. 这里是php系统中遇到的问题,所以以php ...

  7. intervention/image intervention/imagecache

    http://image.intervention.io/ 安装两个包 composer require intervention/image composer require interventio ...

  8. VS C++ 从一个窗口创建另一个窗口

    一.在stdafx.h文件中,添加: #include "Form2.h" / stdafx.h : 标准系统包含文件的包含文件, // 或是经常使用但不常更改的 // 特定于项目 ...

  9. 高德地图API应用

    高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...

  10. 用正则验证字符串格式，形如:A)XXX B)XXXX C)XXX

    今天遇到个小功能,要验证某个英文选项是否正确,例如:A)accumulate B)circling C)communities  D)competition  E)domestic F)financi ...