JavaScript：复选框事件的处理

最新推荐文章于 2024-04-18 15:52:46 发布
最新推荐文章于 2024-04-18 15:52:46 发布
阅读量786 收藏 2
点赞数
文章标签： 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>


链接：https://www.cnblogs.com/XYQ-208910/p/5833870.html







迷津_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现checkbox复选框实例代码
10-22
在JavaScript中，我们可以利用DOM操作和事件处理来实现复选框的各种交互功能，如美化、全选/取消全选等。下面我们将详细探讨如何使用JavaScript实现这些功能。 首先，让我们看看如何对复选框进行美化。原始的HTML复...
checkboxes:复选框
05-29
事件处理是JavaScript与复选框交互的关键部分。最常见的事件是`change`，当复选框状态改变时触发。我们可以通过添加事件监听器来响应这个事件： ```javascript checkbox.addEventListener('change', function() { ...
复选框全选和选不选，获取选中值
chenyinyin1的博客
01-05 189
复选框全选和选不选，获取选中值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <div id="div1"> <input type="checkbox" id="chkAll" name="chkAll" onclick="chk
JS中addEventListener不能用的问题
artemisrj的专栏
03-05 5620
点击      var name3=document.getElementById('name3'); //要注意  var name2=document.getElementById('name2'); //要注意  var info=document.getElementById('info');  name3.addEventListener('click',func
input复选框最好不要用click事件
最新发布
czxy_xingchen的博客
04-18 167
input使用click和change这两个事件的时候，最好使用哪个事件
Javascript知识【案例：复选框操作】
若有所执，必有所成，心之所向，必显光芒
08-07 4257
案例：复选框操作
checkbox 选中触发js事件
热门推荐
qq_40088333的博客
10-13 1万+
checkbox点击的时候触发js事件 选择按钮代码如下： <div> <input type="checkbox" id="checkbox"> <span>本周不再显示</span> </div> js代码如下： <script> $("#checkbox").change(function(){ alert("成功触发checkbox改变事件"); }) </script> ...
layui 监听表格复选框选中值的方法
10-18
总结，layui监听表格复选框选中值的方法主要包括：初始化表格数据、监听复选框事件、处理选中和取消操作，以及异步请求后台。通过这种方式，我们可以灵活地根据用户的交互更新数据并传递给服务器，实现了动态数据...
layui复选框的全选与取消实现方法
10-16
需要注意的是，这里使用了 `lay-filter` 属性来区分不同组的复选框，这样我们可以通过监听不同的过滤器来处理不同级别的复选框事件。 总结一下，实现 Layui 复选框的全选与取消功能主要包括以下步骤： 1. 使用 ...
javascript判断复选框是否选中的方法
10-23
在JavaScript中，判断复选框（checkbox）是否选中是一个常见的任务，这通常涉及到用户交互和表单数据的处理。复选框的状态可以通过其`checked`属性来获取，该属性可以是`true`（选中）或`false`（未选中）。下面，...
jq点击复选框触发事件给input赋值.zip
07-05
jq点击复选框触发事件给input赋值是一款表格复选框获取某一行某一列的值，支持全选选定。
JS判断单个checkbox是否被选中
03-01
博文链接：https://qsfwy.iteye.com/blog/234087
JS控制复选框选中状态
Etui۹(･༥･´)و的博客
03-27 3964
效果图： 源码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){
js事件触发
zhengying5dvhdg的博客
12-09 2998
js事件，冒泡事件，Event对象，事件委托，移动端事件
js 多选框被选中触发的事件_jQuery检查一个复选框并触发javascript onclick事件
weixin_39814454的博客
12-19 1205
使用.triggerHandler()而不是.trigger()：$('input[name=check1]').attr('checked', true).triggerHandler('click');另外，使用.prop()而不是.attr()：$('input[name=check1]').prop('checked', true).triggerHandler('click');(如果你...
JavaScript复选框的使用
syy的博客
10-30 3517
js复选框的使用
复选框触发事件
一只程序媛
10-28 3597
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="js/jquery-1.11.1.js">script> head> body> input type="checkbox" id="checkall" name="checkname"/> script>
layui复选框事件
08-24
// 复选框选择事件的处理逻辑 // data.value获取被选择的复选框的值 }); 2. 在事件处理函数中，可以获取被选择的复选框的值，并执行相应的操作。例如，可以通过data.value获取到被选择的复选框的值，并根据需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值