全选与取消与反选

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量1.2k 收藏 1
点赞数
文章标签： html  js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sw_onload/article/details/81530699
版权

全选与反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        window.onload = function(){
                /*
                *
                * 需求： 全选  / 取消 / 反选
                *
                *
                * */
                //1.0  ctrl + d
                var btnSelect = document.querySelector("#btnSelect");
                var btnCancel = document.querySelector("#btnCancel");
                var btnFanxuan = document.querySelector("#btnFanxuan");
                var aInp = document.querySelectorAll(".cbox");
                //2.0
                btnSelect.onclick = function(){
                    //3.0
                    for(var i = 0 ; i < aInp.length;i++){
                        aInp[i].checked = true ;
                    }

                }
                btnCancel.onclick = function(){
                    //3.0
                    for(var i = 0 ; i < aInp.length;i++){
                        aInp[i].checked = false ;
                    }
                }
                btnFanxuan.onclick = function(){
                    //3.0
                    for(var i = 0 ; i < aInp.length;i++){
                        aInp[i].checked =!aInp[i].checked ;
                    }
                }

                //4.0 定义一个开关的标识
                var isSelect = false  ;
                //!
//                btnFanxuan.onclick = function(){
//
//                    if(isSelect==true){
//
//                        isSelect = false;
//
//                    }else if(isSelect==false){
//
//                        isSelect=true;
//                    }
//
//                    for(var i = 0 ; i < aInp.length;i++){
//                        aInp[i].checked = isSelect ;
//                    }
//                    console.log(isSelect);
//                }



        }
    </script>

</head>
<body>

    <button id="btnSelect">全选</button>
    <button id="btnCancel">取消</button>
    <button id="btnFanxuan">反选</button>
    <ul>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
        <li><input type="checkbox" class="cbox">商品订单</li>
    </ul>
</body>
</html>
猛男找1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html a标签 onload,动态加载script和css标签的onload问题
weixin_30018111的博客
06-26 918
在firefox下，动态加载script标签和css标签，是可以简单地监听onload事件的，但在ie下，监听onload事件无效。为了解决这个问题，可以改用监听onreadystatechange，结合判断readyState的值是否等于loaded或complete来判断是否onload。YUI根据ie,webkit和其它做了三种情况区分。实际工作中，我们只用考虑ie和ff就差不多了，写了个简...
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1028
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
最新发布
weixin_65793170的博客
04-02 1674
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6001
轻松掌握 CSS，实现 loading 加载中的多种形式
全选和反选
aoqiechui9516的博客
11-15 69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
复选框全选反选取消
06-01
可实现全选框全选反选取消等，选了可删除。需引用jqueryDOM结构浅显易改。
JQUERY CHECKBOX全选,取消全选,反选方法三
12-12
下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 代码如下:$(“#myform”).toggleCheckboxes()//全选,取消全选,反选 $(“#myform”).toggleCheckboxes(“:not(#checkbox1)”)//全选,取消全选且...
AngularJS 实现购物车全选反选功能
10-19
购物车全选反选功能是电商网站中常见的需求，允许用户一次性选择或取消选择所有商品。 首先，我们需要创建一个HTML模板，该模板包含一个表格来展示购物车中的商品，以及用于全选和反选的复选框。在这个例子中，我们...
html css js表单中全选取消反选效果
11-11
html css js表单中全选取消反选效果
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
qq_34626688的博客
10-29 4257
下拉选框 好用的下拉选框（单选，多选，全选，清空和反选，及个种样式） 附件一:layui应用formselect layui.config({ base: './libs/formSelects/' //相对路径 }).extend({ formSelects: 'formSelects-v4' }); 附件二: formSelects-v4.css /* formSelects澶...
三种方式实现checkbox全选，反选
09-27
三种方式实现checkbox全选，反选，最简单的js技术；基于java代码，简单易懂，提供三3个demo，每一个都能实现
onload、代码监测、绑定监听、h5标签、css可继承样式
chanzhiliao的博客
08-17 234
1.document.ready 、onload和 window.onload 的区别 document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。 了解body的onload事件的执行时间是非常重要的。onload事件是在网页加载完毕时执行的。当我们在JavaScript中想要操作某元素时而此元素还没有加载
动态加载script和css标签的onload问题
weixin_30906671的博客
11-18 149
在firefox下，动态加载script标签和css标签，是可以简单地监听onload事件的，但在ie下，监听onload事件无效。为了解决这个问题，可以改用监听onreadystatechange，结合判断readyState的值是否等于loaded 或complete来判断是否onload。YUI根据ie,webkit和其它做了三种情况区分。实际工作中，我们只用考虑ie和ff就差不多了，写了...
CSS在页面加载时创建淡入效果
qq_43067585的博客
07-07 1092
下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法，希望对大家有所帮助。 想要使用CSS在页面加载上创建淡入效果，可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。 方法1：使用CSS animation属性 通过2个关键帧来定义CSS动画：一个不透明度设置为0，另一个不透明度设置为1。此属性应用于body标记；当动画的类型设置为ease时，动画会在页面中平滑淡入。每当页面加载时，这个动画就会播放，页面就会出现
全选与反选
weixin_52163042的博客
12-28 975
全选与反选 具体要求如下： 1）根据数据创建表格； 2）表格在页面中距离上面100像素、水平居中并且其每行内的内容也居中,单元格的高度是：40像素； 3）创建反选按钮并放入表格的下方，按钮的大小为宽：100像素，高：50像素; 4）点击全选按钮则每一项都要选中，如果其中的一项没有选中则全选按钮没有选中 5）点击反选按钮实现反选的功能 <div class="box"> <table> <thead>
全选与反选代码
SuperListenter的博客
11-05 541
DOCTYPE html> html> head> meta charset="UTF-8"> title>testtitle> style type="text/css"> * {padding: 0;margin: 0;list-style: none;} #wrap {width: 800px;margin: 50px;font-size: 20px;
“表单全选取消全选”，js实现全选与反选的功能
06-13
好的，实现表单全选与取消全选的功能，需要用到JavaScript来动态修改表单元素的checked属性。下面是一个简单的示例代码，用于实现表单全选和取消全选的功能。 HTML部分： ``` 选项1 选项2 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值