JavaScript:复选框事件的处理

转载 2018年04月15日 20:15:17
<!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>

JavaScript之checkbox选择

本文内容来自《15. 尚硅谷佟刚_JavaScript DOM编程实验之Select级联选择》视频教程,版权归期所有,仅作记录以备后查。效果如下: 源代码如下: ...
  • maxine_du
  • maxine_du
  • 2016-09-02 09:58:47
  • 229

JavaScript:复选框事件的处理

&amp;lt;!doctype html&amp;gt; &amp;lt;html lang = &quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt;    ...
  • SINGLEP
  • SINGLEP
  • 2018-04-15 20:15:17
  • 5

实用的复选框操作——15分钟解决90%以上的javascript复选框操作

“复选框”页面: —————————————————————————————————————————————————————————————————— 实现功能: 1.点击标...
  • Allenalex
  • Allenalex
  • 2014-11-25 18:45:17
  • 1785

JS CheckBox 选中事件

 [html] view plaincopyprint? html>  script>  function SelectLeastOne(){          objNa...
  • chen_yanfeng
  • chen_yanfeng
  • 2014-07-18 15:57:02
  • 6416

JS控制checkbox

下面的有关实现chckbox全选的方法或多或少存在一些缺陷,具体的方法在另一个帖子中有详细的说明:http://blog.csdn.net/luweifeng1983/archive/2008/12/...
  • luweifeng1983
  • luweifeng1983
  • 2008-12-16 18:07:00
  • 6972

JavaScript前端按钮复选框

web-复选框
  • abc15156714976
  • abc15156714976
  • 2017-09-27 14:46:20
  • 52

java基础---Jquery复选框checkbox全选反选及选中事件

HTML代码: 吃饭 睡觉 打豆豆 因为是用jquery做的,所以必须先要导入jquery的js文件 1.点击全选,再点击全不选 $(...
  • wy123123000
  • wy123123000
  • 2017-06-22 11:32:50
  • 1167

带复选框的CTreeCtrl响应复选消息

1.在对话框中添加CTreeCtrl控件并勾选Check Boxes选项,为CTreeCtrl控件添加CTreeCtrl变量m_tree; 2.为CTreeCtrl控件添加NM_CLICK消息响应函...
  • lhf19891003
  • lhf19891003
  • 2014-06-26 15:57:47
  • 1012

javascript 原生态 checkbox 操作

javascript 原生态 checkbox 操作 //循环给复选框赋值 function ShowCheckBox() { ...
  • KingCruel
  • KingCruel
  • 2015-07-10 16:47:18
  • 534

javascript 判断checkbox是否被选中

1.表单里有n个checkbox 的时候 如: function ifChecked() {   var a = document.getElementsByName("cashbagSaveYN...
  • dinglinhu
  • dinglinhu
  • 2008-06-03 17:36:00
  • 18055
收藏助手
不良信息举报
您举报文章:JavaScript:复选框事件的处理
举报原因:
原因补充:

(最多只允许输入30个字)