复选框事件的处理

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

    在所需要导出数据库上右键 选择[任务] 然后选择[生成脚本] 选择数据库,点击下一步到[数据脚本选项] 编写数据的脚本 选择为true  这一步很重要 下一步选择要导出的对象 下一步选择表 点击完成 ...

  2. HTML中为何P标签内不可包含DIV标签？

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  3. hdu 4310 Hero

    这道题是道算是一道很简单的贪心题了,但是要注意排序的依据,这道题是按照dps/hp的从大到小排序的,然后计算总的sumhp即可. #include"iostream" #inclu ...

  4. Asp.Net 常用代码-备用

    1.DropDownList 复制 //DropDownList DropDownList2.Items.Clear(); foreach (ListItem li in DropDownList1. ...

  5. nova

    chen@controller:~$ nova usage: nova [--version] [--debug] [--os-cache] [--timings]             [--ti ...

  6. Memcached 笔记与总结（5）Memcached 的普通哈希分布和一致性哈希分布

    普通 Hash 分布算法的 PHP 实现 首先假设有 2 台服务器:127.0.0.1:11211 和 192.168.186.129:11211 当存储的 key 经过对 2 (2 台服务器)取模运 ...

  7. 【翻译】Kinect v2程序设计(C++) Depth编

    Kinect SDK v2预览版,取得Depth数据的方法说明. 上一节,介绍了通过使用Kinect for Windows SDK v2预览版(以下简称为,Kinect SDK v2预览版)从Kin ...

  8. Arrays类的十大用法

    还有很多地方需要细细斟酌 0. 声明数组 String[] aArray = new String[5]; String[] bArray = {"a","b" ...

  9. Siddhi CEP Window机制

    https://docs.wso2.com/display/CEP400/SiddhiQL+Guide+3.0#SiddhiQLGuide3.0-Window https://docs.wso2.co ...

  10. SpringMVC 基于注解的Controller详解

    本文出处 http://blog.csdn.net/lufeng20/article/details/7598801 概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spri ...