原生JS实现全选全不选小demo

最新推荐文章于 2023-04-15 15:13:09 发布
最新推荐文章于 2023-04-15 15:13:09 发布
阅读量275 收藏 1
点赞数
文章标签： 前端 全选全不选 原生js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42475121/article/details/83276353
版权

很久没有写博客了，今天又回头学习了一下原生JS

来写了一个简单的小demo，实现复选框的全选全不选的操作。

实现的效果如下：

                

具体代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
        <title>案例全选全不选</title>
    </head>
    <body>
        <div id="myDiv">
            <table class="layui-table">
                <colgroup>
                    <col width="50">
                    <col height="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th> <input type="checkbox" id="all" /> </th>
                        <th> 全选 </th>
                    </tr>
                </thead>
                
                <tbody id="myTbody">
                    <tr>
                        <td> <input type="checkbox" /> </td>
                        <td> 土豆烧肉 </td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" /> </td>
                        <td> 番茄炒蛋 </td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" /> </td>
                        <td> 山药炒肉 </td>
                    </tr>
                    <tr>
                        <td> <input type="checkbox" /> </td>
                        <td> 鸡蛋火腿 </td>
                    </tr>
                </tbody>

            </table>
        </div>
        
        <script type="text/javascript">
            var myTbody = document.getElementById("myTbody");
            var allBox = document.getElementById("all");
            //获取所有的复选框
            var box = myTbody.getElementsByTagName("input");
            //为全选按钮添加点击事件
            allBox.onclick = function(){
                //循环遍历除全选框以外的其他复选框
                for(var i=0;i<box.length;i++){
                    //其他复选框的选中状态等于全选框的选中状态
                    box[i].checked = this.checked;
                }
            };
            for(var i=0;i<box.length;i++){
                //为除全选以外的每个复选框增加点击事件
                aaa[i].onclick = function(){
                    var flag = true;
                    for(var j=0;j<box.length;j++){
                        //如果复选框没有被选中，则跳出循环,
                        if(!box[j].checked){
                            flag = false;
                            break;
                        }
                    }
                    allBox.checked = flag;
                };
            }
        </script>
        
    </body>
</html>

桀森
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现全选全不选
04-20
NULL 博文链接：https://sylqy.iteye.com/blog/1894273
js实现全选和全不选功能
10-15
在JavaScript中，实现全选和全不选的功能是常见的需求，尤其在处理表格或列表时。这个功能允许用户一键选择所有选项或者一键清除所有选择。本篇将详细讲解如何使用JavaScript来实现这一功能。 首先，我们需要一个...
原生js的全选全不选
桃桃雾的博客
11-13 429
单选实现全选,给每一个选项绑定事件,设置一个选中的状态,选中为true,没选中为false,在设置一个来存储单选状态的变量,当选中的时候加一,没选中的减一,判断这个变量是否等于单选的长度,如果等于,让全选的状态为true,否则为false。首先毋庸置疑的肯定是先获取元素.然后再来实现一下全选的效果,给全选绑定单击事件,获取全选的选中状态,当点击全选时,遍历每一个选项,让每一个选项的选中状态跟随全选的选中状态来该更,即可实现全选全不选,给每一个单选按钮绑定事件。,有什么不会的随时私信.
原生js实现全选和全不选
qq_23864401的博客
07-10 386
html部分 <ul> <li>全选：<input type='checkbox' id='check-all'></li> <li>1 选项 <input type='checkbox' class='check-item'></li> <li>2 选项 <input type=...
JavaScript实现全选和全不选
09-09 179
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function selectAll(num){ //获取下面的四个复选框 var res = document.getE...
原生js实现全选全不选反选
weixin_33738555的博客
10-21 666
一、思路1、全选/全不选：（1）监听全选按钮的点击事件，通过遍历每一个input标签，设置其状态设置为全选按钮的状态，来实现全选和全不选。（2）更新全选框的状态，判断全选框状态的更新函数可以通过计数input[i]处于选中状态的个数（n）来设计，如果n == length，全选框为选中状态，后面的文字变成“全不选”；否则，全选框为未选中状态，后面的文字为“全选”。2、input复选框的状态改变时，...
vue 实现全选全不选的示例代码
08-27
Vue 实现全选全不选的示例代码 本篇文章主要介绍了 Vue 实现全选全不选的示例代码，提供了一个使用 Vue 框架实现全选全不选的示例代码。该示例代码使用 Vue 的双向数据绑定命令 v-model 实现全选全不选功能，解决了...
使用js如何实现全选与全不选
10-26
本篇文章将详细介绍如何使用js实现全选与全不选。 首先，我们需要理解JavaScript中的DOM（Document Object Model），它是HTML和XML文档的编程接口。通过DOM，我们可以动态地访问和修改文档的内容、结构和样式。在...
js实现全选和全不选
12-28
非常简洁的几行原生js实现全选和全不选，大神们可以在此基础上加上反选功能。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>全选、全不选</title> </head&gt...
js 全选 全不选
xiaojunhu的专栏
04-14 929
 本文介绍的是用JS实现全选全不选的方法，另外，这个代码不是我写的，我只是从公司的项目里提取出来，并总结在此，以便以后复用，呵呵。function chkClick (chk , oSrc)...{    if(chk.checked)        chkAll (oSrc) ;    else        unChkAll (oSrc)}function chkAll (oSrc).
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JS实现全选、不选、反选
weixin_30535167的博客
12-12 62
思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。 HTML代码 1 全选：...
全选（原生js）
weixin_45673735的博客
02-04 536
<div id="box"> <input type="checkbox" name="" id="quan"> <div id="xuan"> <div class="bx"> <input type="checkbox" name="" class="no"> AA </div> ...
前端js原生实现全选全不选
weixin_45096939的博客
11-21 723
现在很多的组件库已经有属性可以直接实现全选全不选的效果，比js原生的写法简单许多；原生的写法是基础，多了解点总没坏处。
JS实现全选全不选功能
最新发布
qq_64037242的博客
04-15 629
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
用js实现全选全不选功能
忆晨的博客
06-15 476
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选</title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById("all"); btn.onclick = func
原生JS实现全选与反选和jquery全选与反选
wangyibo5843的专栏
10-14 1668
js原生dom实现全选与反选，jquery实现全选与反选
JS原生代码全选/全不选练习
幼儿园园长
09-14 442
最近在补学习js（前端小菜鸟js基础太弱）尝试用原生的js写代码，做了这样一个小的练习，记录一下。 先看一下效果： 实现的效果是， 基础功能：点击全选/全不选的按钮或者是点击checkbox框，下面的四项都会被选中/取消选中，点击反选，会对四项进行反选。 进阶功能：上面这些比较简单，一个稍微复杂的是，上面的全选/全不选的checkbox的框会同步下面四个选项框（四个都选则选中等等），具体可以复制一下代码看一下效果 直接上代码： <!DOCTYPE html> <html lang="en
原生js实现全选全不选
m0_64590669的博客
08-09 356
原生js实现全选全不选
js实现全选/全不选功能
03-31
HTML代码： ``` <input type="checkbox" id="checkAll">全选/全不选 <br> <input type="checkbox" class="checkbox">选项1 <br> <input type="checkbox" class="checkbox">选项2 <br> <input type="checkbox" class="checkbox">选项3 <br> <input type="checkbox" class="checkbox">选项4 ``` JavaScript代码： ``` var checkAll = document.getElementById("checkAll"); var checkboxes = document.getElementsByClassName("checkbox"); // 全选/全不选按钮点击事件 checkAll.onclick = function() { for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = this.checked; } }; // 单个复选框点击事件 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = function() { var checkedCount = 0; for (var j = 0; j < checkboxes.length; j++) { if (checkboxes[j].checked) { checkedCount++; } } checkAll.checked = checkedCount === checkboxes.length; }; } ``` 解释：首先通过 `getElementById` 和 `getElementsByClassName` 方法获取全选/全不选按钮和所有的复选框，然后为全选/全不选按钮和每个复选框分别绑定点击事件。全选/全不选按钮点击事件中，遍历所有复选框，并将它们的 `checked` 属性设置为全选/全不选按钮的 `checked` 属性。单个复选框点击事件中，遍历所有复选框，统计选中的复选框数量，若数量等于所有复选框数量，则将全选/全不选按钮的 `checked` 属性设置为 `true`，否则设置为 `false`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值