js-全选反选效果

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量541 收藏 1
点赞数
分类专栏： jQuery JavaScript 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45496075/article/details/105881403
版权

全选反选效果在很多网页都能见到，那具体代码是怎样的呢，在这里简单介绍一下两种方式js，jquery：
工具：WebStorm等
前提：熟悉html，css，JavaScript，jQuery
先用js简单看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>学生姓名</th>
                <th>邮箱地址</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>张三</td>
                <td>1234567890@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>李四</td>
                <td>1234567891@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>王五</td>
                <td>1234567892@qq.com</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>赵六</td>
                <td>1234567893@qq.com</td>
            </tr>
            </tbody>
        </table>
    </div>
    <script>
        //查找id为j_tb的元素
        var j_tb = document.getElementById('j_tb');
        //查找j_tb下的input标签
        var inputs=j_tb.getElementsByTagName('input');
        //查找id为j_cbAll的元素
        var j_cbAll = document.getElementById('j_cbAll');
        j_cbAll.onclick=function () {   //全选事件，每个input设置为checked
            for (var i=0;i<inputs.length;i++){
                var input = inputs[i];
                if (input.type==='checkbox'){
                    input.checked=this.checked;
                }
            }
        }
        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            if (input.type!=='checkbox'){
                continue;
            }
            input.onclick=function () {
                checkAll(); //调用checkAll方法，判断是否选中主复选框
            }
        }
        function checkAll() {
            var ischeck=true;
            for (var i=0;i<inputs.length;i++){
                var input=inputs[i];
                //判断是否为input标签
                if (input.type!=='checkbox'){
                    continue;
                }
                if (!input.checked){    //判断input标签是否全部选中
                    ischeck=false;
                }
            }
            j_cbAll.checked=ischeck;    //判断主复选框是否选上，true为选上，false为不选
        }
    </script>
</body>
</html>

接下来我们用jQuery看一下：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
   
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>学生姓名</th>
            <th>邮箱地址</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>张三</td>
            <td>1234567890@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>李四</td>
            <td>1234567891@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>王五</td>
            <td>1234567892@qq.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>赵六</td>
            <td>1234567893@qq.com</td>
        </tr>
        </tbody>
    </table>
</div>
 <!--    引入jQuery库-->
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中或不全选
            //让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
            $("#j_cbAll").click(function () {
                var cked=$(this).prop("checked");//保存当前主复选框的选中状态
                //获取tbody中所有的复选框
                $("#j_tb").find(":checkbox").prop("checked",cked);
            });

            //获取tbody中所有的复选框
            $("#j_tb").find(":checkbox").click(function () {
                //先获取tbody中所有的复选框的个数
                var length1=$("#j_tb").find(":checkbox").length;
                //再获取tbody中所有选中的复选框的个数
                var length2=$("#j_tb").find(":checked").length;
                //二者比较,如果相同,主复选框选中
                if(length1==length2){
                    //都选中，为true
                    $("#j_cbAll").prop("checked",true);
                }else{
                    //没全选中，为false
                    $("#j_cbAll").prop("checked",false);
                }
            });
        });
    </script>
</body>
</html>

最后网页测试查看效果：
在这里插入图片描述
效果达到了，成功完成！

凌风少年z
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 全选/反选,取消选择效果
11-30
其实这个效果不难做。 难做的是 如何让用户使用起来方便。 第一个checkbox实现了 全选 反选 最后个checkbox实现了 取消选择 这里只是做一个 JS实例罢了。 这段HTML并没有 实际的价值。 javascript 全选/反选效果。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JS全选与反选
qq_34082921的博客
09-10 1515
【代码】JS全选与反选的代码实现。
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1008
完整代码如下 <!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 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1530
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
02-全选反选-js.html
02-15
02-全选反选-js.html
利用Vue.js实现checkbox的全选反选效果
10-20
最近用vue做了两个项目，都需要实现全选反选的功能，所以想着记录下分享给大家，方便自己或者有需要的朋友们参考讲学习，所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习...
简单js实现全选全部选反选效果
11-11
简单js实现全选全部选反选效果
JS实现全选反选全不选
06-18
JS实现全选反选全不选
Javascript实现全选反选
08-11
Javascript实现全选反选 Javascript绑定事件
js 实现全选和反选
PSG_li的博客
05-05 148
点击总按钮，实现按钮列表的全选和反选 根据按钮列表来设置总按钮是否选中 若按钮列表都已选中，则总按钮自动选中 若按钮列表有一个未选中，则总按钮不会选中
如何通过JS实现反选功能？
178技术
11-08 984
下面有个表格： 表格代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"..
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1670
这种情况在购物车中尤为常见
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
最新发布
weixin_65793170的博客
04-02 962
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
js实现复选框的全选，反选功能
qq_64790872的博客
08-15 374
input type="checkbox" name=""id="selAll">全选。<input type="checkbox" name=""id="fx">反选。// 所有复选框被选中时，全选点亮。// 被选的复选框长度。
js完成全选反选
qq_48575162的博客
02-04 308
js获取标签状态，完成全选反选等功能
js实现全选反选
m0_73734137的博客
01-03 352
【代码】js实现全选反选。
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 602
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript 实现全选 / 反选功能
大家好，我是 ed.
03-02 5080
JavaScript 实现全选 / 反选功能 构建主体界面 编写 HTML 代码 和 CSS 代码，设计主题界面 <style> #user { width: 500px; text-align: center; } #user, #user th, #user td { border: 1px so...
js全选 反选 表单
03-28
以下是一个使用JavaScript实现全选和反选的表单示例： HTML代码： ``` 选项1 选项2 选项3 选项4 选项5 ()">全选 ()">反选 ``` JavaScript代码： ``` function selectAll() { var ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值