原生js中实现全选和反选功能

最新推荐文章于 2023-02-21 15:38:18 发布
最新推荐文章于 2023-02-21 15:38:18 发布
阅读量84 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/huangshikun/p/7097857.html
版权

    <!DOCTYPE html>  
    <html>  
    <head lang="en">  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
      
        </style>  
    </head>  
    <body>  
        <table border="1">  
            <tr>  
                <th><input type="checkbox" class="choose-all-input" οnclick="clickChooseAllInput()" /></th>  
                <th>学号</th>  
                <th>姓名</th>  
                <th>班级</th>  
            </tr>  
            <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>001</td>  
                <td>张三</td>  
                <td>李四</td>  
            </tr>  
             <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>002</td>  
                <td>张三</td>  
                <td>李四</td>  
            </tr>  
             <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>003</td>  
                <td>张三</td>  
                <td>李四</td>  
            </tr>  
             <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>004</td>  
                <td>张三</td>  
                <td>李四</td>  
            </tr>   <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>005</td>  
                <td>张三</td>  
                <td>李四</td>  
            </tr>  
            <tr>  
                <td><input type="checkbox" class="choose-single" /></td>  
                <td>002</td>  
                <td>F20</td>  
                <td>F20</td>  
            </tr>  
        </table>  
        <button οnclick="clickChooseAllBtn()">全选</button>  
        <button οnclick="clickChooseReverse()">反选</button>  
    </body>  
    <script type="text/javascript">  
        var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0];  
        var chooseSingleEles = document.getElementsByClassName("choose-single");  
        function clickChooseAllInput() {  
            if (chooseAllInputEle.checked) {  
                choose("selected");  
            } else {  
                choose("");  
            }  
        }  
        function clickChooseAllBtn() {  
            chooseAllInputEle.checked = "checked";  
            choose("selected");  
        }  
        function choose(status) {  
            for (var i = 0; i < chooseSingleEles.length; i++) {  
                chooseSingleEles[i].checked = status;  
            }  
        }  
      
        function clickChooseReverse() {  
            for (var i = 0; i < chooseSingleEles.length; i++) {  
                if (chooseSingleEles[i].checked) {  
                    chooseSingleEles[i].checked = "";  
                } else {  
                    chooseSingleEles[i].checked = "checked";  
                }  
            }  
        }  
      
    </script>  
    </html> 

转载于:https://www.cnblogs.com/huangshikun/p/7097857.html

weixin_30381317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS 实现简单的全选反选.html
09-28
实现table表格checkbox复选框的全选 反选, 适用于原生table。
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
原生JS实现全选，反选
weixin_30505751的博客
02-23 73
第一篇博客，先记录下简单的原生JS实现全选，反选功能。 无样式，比较丑 <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script>window.onload=function(){ var arr=document.getEl...
原生js实现全选反选
前端技术
07-04 829
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&am
原生js实现全选、反选（面向对象写法）
jianjieX的博客
11-29 263
html结构： <div class="container"> <ul class="top"> <li><input type="checkbox" name="all">全选</li> <li><input type="checkbox" name="i...
js原生实现全选反选
时光清浅处，一步一安然
08-12 148
js原生实现全选反选 <span>全选：</span><input type="checkbox" id="checkAll"> <div id="content"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div>
js, jQuery实现全选、反选功能.docx
01-19
在JavaScript和jQuery中，全选和反选功能是常见的交互设计，主要用于用户界面中的复选框操作。在表格、列表或者其他需要多选的场景中，全选和反选功能能够大大提高用户体验。以下将详细介绍如何使用JavaScript和...
原生JS表格列表全选反选单选多选代码.zip
07-11
这是一款原生JS实现的，点击表格列表选中，可以单选、多选、全选和反选的表格列表选择代码。 js代码 [removed]  var all = document.getElementById("j_cbAll");  var tbody = document.getElementById("j_...
原生JS表格列表全选反选代码.zip
07-05
这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点。 1. **HTML表格（`<table>`）**： HTML表格是网页中用于组织数据的基本元素，由`<table>`、`<tr>`（行...
原生js实现全选和全不选
qq_23864401的博客
07-10 380
html部分 <ul> <li>全选：<input type='checkbox' id='check-all'></li> <li>1 选项 <input type='checkbox' class='check-item'></li> <li>2 选项 <input type=...
原生js实现全选和反选的功能 --冯浩的博客
m0_50207524的博客
08-26 599
思路：首先我们获取节点 遍历每个节点 获取到checked的属性 然后我们通过改变checked的属性改变选中的状态 全选的时候我们让他们都为true 反选的时候我们使用！达到效果 本次使用到的知识点有： document.getElementsByName（‘name属性’）：选中所有的name为name属性的的元素节点对象 document.getElementById('id名称'): 通过id名称获取一个元素节点对象 onclick:鼠标点击事件 html部分： <in
原生js实现全选全不选反选
weixin_33738555的博客
10-21 661
一、思路1、全选/全不选：（1）监听全选按钮的点击事件，通过遍历每一个input标签，设置其状态设置为全选按钮的状态，来实现全选和全不选。（2）更新全选框的状态，判断全选框状态的更新函数可以通过计数input[i]处于选中状态的个数（n）来设计，如果n == length，全选框为选中状态，后面的文字变成“全不选”；否则，全选框为未选中状态，后面的文字为“全选”。2、input复选框的状态改变时，...
js原生 全选,全不选,选项,反选
wys997的博客
08-02 139
不多说,自己看上代码: 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
js实现全选和反选功能
风轻云淡
03-05 810
//选中全选按钮，下面的checkbox全部选中 var selAll = document.getElementById("selAll"); function selectAll() { var obj = document.getElementsByName("checkAll"); if(document.getElementById("selAll").checked == fa
用原生js实现反选与全选的小功能
张露的博客
04-24 232
HTML 部分：&lt;form&gt; &lt;input type="checkbox" name="che" onclick="selectAll()"&gt;全选 &lt;input type="checkbox" name="che" onclick="func1(this)"/&gt;全选 &lt;input type=&
原生JS实现全选和不全选
weixin_30644369的博客
03-07 148
案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ...
原生js写的一个全选，不全选功能。
fishegg07的博客
04-21 361
<form action="" name="la"> <table> <tr> <td><input type="checkbox" val="1" name="ck"></td> ...
Android购物车怎么实现全选和反选
最新发布
06-08
要实现Android购物车的全选和反选功能，可以按照以下步骤进行： 1. 首先在购物车列表中添加一个全选的CheckBox，并设置其状态为未选中。 2. 在Adapter中实现全选和反选的逻辑。可以通过一个Boolean类型的变量来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值