复选框事件的处理

　　复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用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. Linux命令总结_文件查找之grep

    1.grep命令 grep一般格式为:grep [选项]基本正则表达式[文件]这里基本正则表达式可为字符串,字符串或变量应该用双引号,模式匹配用单引号 选项: -c  只输出匹配行的计数 -i  不区 ...

  2. 使用GCD

    使用GCD 什么是 GCD Grand Central Dispatch (GCD) 是 Apple 开发的一个多核编程的解决方法.该方法在 Mac OS X 10.6 雪豹中首次推出,并随后被引入到 ...

  3. 三层架构实例 VB.NET版

    三层实例 首先发现感慨,对于三成这块,用到都是一些面向对象的特征,尤其是对象的实例化.如果你不是很注意的话,那么,你就会一头雾水,就像我一样,慢慢的雾里看花,最后也是走出来的,不过用的事件是相当的. ...

  4. [转]SEP 11.x 迁移

    Sepm 迁移/灾难恢复     条件:更换服务器主机/重装服务器系统,但保持主机ip地址不更改,主机名不更改.     备份步骤:     Login 服务器控制台,进入"管理员" ...

  5. OpenCV学习笔记——多种Smooth平滑处理

    opencv库提供了好几种模糊平滑Smooth操作的类型作为cvSmooth的参数传入,从而达到不同的平滑效果,另外复习了一下如何复制一份图像和重新调整图像大小. 调整图像大小目前是按照一下步骤进行: ...

  6. java数组排序问题：array.sort()是从小到大排序，那么如何从大到小排序？

    别告诉我从i=a.length开始打印然后i--!因为数组没变啊,只是打印顺序变了.有木有啥别的方法,除了冒泡插入选择.. nteger [] array=new Integer[]{1,2,3,4, ...

  7. emacs notepad notepad++ 撤销比较

    以前使用编辑器都是直接上手,未读过什么的文档了解.所谓撤销只是使用,也不了解究竟撤销到何处,阅读了emacs的文档才知道有许多区别呢. 输入this is a pen,然后一个个字符地删除到this ...

  8. PHP 命名空间总结

    PHP 5.3 及以上版本中引入了命名空间 的概念. notes: 1. 在 PHP 中,命名空间用来解决在编写 类库 或 应用程序 时创建 可重用 的 代码如 类 或 函数 时碰到的两类问题: ① ...

  9. mysq数据库再次理解

    1.表中的一条记录就是一个object,object有很多属性,对应表中的字段.object的属性对应的值就是字段值 2.外键是关联表关系用的.表关系的确立只能通过外键 但更高效的策略是,在数据库中部 ...

  10. js 表单内容使用ajax以json格式混合提交

    脚本代码 function submitForm(){    var post_data = $("#form1").getdict();    var data_dict = { ...