js实现全选反选

最新推荐文章于 2023-07-18 11:18:07 发布
最新推荐文章于 2023-07-18 11:18:07 发布
阅读量924 收藏 3
点赞数
分类专栏： 前端 文章标签： js 全选反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Young_Fee/article/details/79040941
版权

效果：这里写图片描述

注意是双击全选反选！
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" ondblclick="CheckAll();"/><!--双击-->
        <input type="button" value="取消" ondblclick="CancleAll();"/><!--双击-->
        <input type="button" value="反选" onclick="ReverseAll();"/><!--单击-->
    </div>
<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>用户号</th>
            <th>年龄</th>
        </tr>
    </thead>
<tbody id="tb">
        <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
         <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
         <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
        <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

<script>
    function CheckAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            current_check.checked = true;
        }
    }
    function CancleAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            current_check.checked = false;
        }
    }
    function ReverseAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            if (current_check.checked){
                current_check.checked = false;
            }else{
                current_check.checked = true;
            }
        }
    }
</script>
</body>
</html>
yangtz_1999
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js全选和反选
noShutdown的博客
03-01 257
js代码 function testAllCheckbox() { //获得checkbox列表 var boxs = document.getElementsByName(&amp;amp;quot;check&amp;amp;quot;); //获得按钮的对象 var all = document.getElementById(&amp;amp;quot;...
js-全选反选效果
凌风少年z
05-01 550
全选反选效果在很多网页都能见到，那具体代码是怎样的呢，在这里简单介绍一下两种方式js，jquery： 工具：WebStorm等 前提：熟悉html，css，JavaScript，jQuery 先用js简单看一下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1029
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JS全选与反选
qq_34082921的博客
09-10 1558
【代码】JS全选与反选的代码实现。
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
JavaScript 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1803
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
AngularJS实现全选反选功能
10-23
主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧
JS实现全选反选全不选
06-18
JS实现全选反选全不选
javascript 全选/反选,取消选择效果
11-30
其实这个效果不难做。 难做的是 如何让用户使用起来方便。 第一个checkbox实现了 全选 反选 最后个checkbox实现了 取消选择 这里只是做一个 JS实例罢了。 这段HTML并没有 实际的价值。 javascript 全选/反选效果。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
vue使用监听实现全选反选功能
08-27
在部分内容中，我们可以看到实现全选反选功能的代码，包括数据的定义、页面代码和 JavaScript 代码。数据的定义中，我们可以看到 allCheck 变量用于记录全选的状态，而 checkArr 数组用于存储每个子集的状态。在页面...
js实现全选反选不选功能代码详解
01-19
本文实例为大家分享了js实现全选反选不选功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input type='checkbox' name='id' />...
js 实现全选和反选
PSG_li的博客
05-05 170
点击总按钮，实现按钮列表的全选和反选 根据按钮列表来设置总按钮是否选中 若按钮列表都已选中，则总按钮自动选中 若按钮列表有一个未选中，则总按钮不会选中
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1732
这种情况在购物车中尤为常见
如何通过JS实现反选功能？
178技术
11-08 1016
下面有个表格： 表格代码如下： <!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_51938823的博客
07-11 762
利用JS写了一个相对简单的全选和反选功能。
js完成全选反选
qq_48575162的博客
02-04 327
js获取标签状态，完成全选反选等功能
OGSM绩效管理培训材料双份资料.pptx
最新发布
07-12
OGSM绩效管理培训材料双份资料.pptx
vue3实现全选反选功能
05-16
在 Vue 3 中实现全选反选功能，可以使用 `v-model` 指令绑定一个布尔值来实现全选和反选的状态切换。具体实现步骤如下： 1. 在 data 中定义一个数组 `items`，用来存储需要全选反选的选项列表。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } } } </script> ``` 2. 在模板中使用 `v-for` 循环渲染出所有选项，并使用 `v-model` 绑定每个选项的 `checked` 属性。 ```html <template> <div> <label> <input type="checkbox" v-model="allChecked" @change="selectAll"> 全选 </label> <div v-for="item in items" :key="item.id"> <label> <input type="checkbox" v-model="item.checked" @change="checkItem"> {{ item.name }} </label> </div> </div> </template> ``` 3. 实现全选和反选的方法。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } }, methods: { // 全选/取消全选 selectAll() { this.items.forEach(item => item.checked = this.allChecked) }, // 单个选项被选中/取消选中 checkItem() { this.allChecked = this.items.every(item => item.checked) } } } </script> ``` 在 `selectAll` 方法中，遍历 `items` 数组，将每个选项的 `checked` 属性设置为 `allChecked` 的值，这样就实现了全选和取消全选的功能。 在 `checkItem` 方法中，判断当前是否所有的选项都被选中，如果是，则将 `allChecked` 的值设置为 `true`，否则设置为 `false`，这样就实现了反选的功能。 这样，我们就完成了 Vue 3 中全选反选的实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值