JavaScript学习笔记---全选反选示例

最新推荐文章于 2021-05-09 15:09:15 发布
最新推荐文章于 2021-05-09 15:09:15 发布
阅读量213 收藏
点赞数
分类专栏： javascript学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34964399/article/details/79330446
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hidden{
            display:none;
        }
        .c1{
            position:fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color:grey;
            opacity:0.5;
            z-index = 9;

        }
        .c2{
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            height:420px;
            width:500px;
            background-color: white;
            z-index: 10;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" οnclick="show()"/>
    <input type="button" value="全选" οnclick="chooseAll()"/>
    <input type="button" value="取消" οnclick="cancelAll()"/>
    <input type="button" value="反选" οnclick="reverseAll()"/>
    <table>
        <thead>
            <tr>
                <h3><th>选择</th></h3>
                <h3><th>主机名</th></h3>
                <h3><th>端口</th></h3>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" name="select" value="1" /></td>
                <td>1.1.1.100</td>
                <td>190</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="select" value="2" /></td>
                <td>1.1.1.101</td>
                <td>191</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="select" value="3" /></td>
                <td>1.1.1.102</td>
                <td>192</td>
            </tr>
        </tbody>
    </table>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hidden"></div>
    <!--遮罩层结束-->
    <!-- 弹出框开始-->
    <div id="i2" class="c2 hidden">
        <div style="position:relative;left:120px;top:150px">主机名
            <input type="text" style="position:absolute; left:60px"/>
        </div>
        <br/>
        <div style="position:relative;left:120px;top:150px">端口
            <input type="text" style="position:absolute;left:60px; "/>
        </div>
        <input type="button" value="确认" style="position:fixed;left:35%;top:70%"/>
        <input type="button" value="取消" style="position:fixed;left:39%;top:70%" οnclick="hide()"/>
    </div>
    <!-- 弹出框结束-->
    <script>
        function show(){
            document.getElementById('i1').classList.remove('hidden');
            document.getElementById('i2').classList.remove('hidden');
        }
        function hide(){
            document.getElementById('i1').classList.add('hidden');
            document.getElementById('i2').classList.add('hidden');
        }
        function chooseAll(){
            var tb_list = document.getElementById('tb').children;
            for(var i=0;i<tb_list.length;i++){
                tb_list[i].children[0].children[0].checked = true;
            }
        }
        function cancelAll(){
            var tb_list = document.getElementById('tb').children;
            for(var i=0;i<tb_list.length;i++){
                tb_list[i].children[0].children[0].checked = false;
            }
        }
        function reverseAll(){
            var tb_list = document.getElementById('tb').children;
            for(var i=0;i<tb_list.length;i++){
                var checkbox = tb_list[i].children[0].children[0];
                if(checkbox.checked){checkbox.checked=false;}else{checkbox.checked=true;}
            }
        }
    </script>

</body>
</html>

xiaoa~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI多选框反选的实现代码
12-09
最近有一个需求，点击添加按钮，弹出窗口（窗口显示多选、可翻页、可检索列表），选中多条信息，当我点击确定按钮，把选中信息显示在页面上；点击取消，选中信息不显示在页面上。再次打开，把在页面上的信息显示选中状态。 思路：一开始选用elementUI官网例子,使用selection-change，但是它只显示当前改变的选择，不能满足我翻页及检索后还能选中数据的问题 toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(ro
02-全选反选-js.html
02-15
02-全选反选-js.html
JavaScript、全选反选-课堂笔记
weixin_34248258的博客
01-04 52
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="button" v...
初学者Javascript 实现全选和反选
JS 实现全选和反选
04-15 152
Javascript中 实现全选和反选 以下是html部分： <input type="checkbox" id="all">全选 <input type="checkbox" id="fanxuan">反选 <div class="box"> <input type="checkbox" name="btn">星期...
全选反选小案例
小白小白从不日别的博客
04-19 1117
原理： 当点击全选按钮时，其对应的元素将被去全部选中；当点击反选按钮时，会选中没有选中的元素，之前选中的元素将失去选中；当点击全不选按钮时，其对应的元素都将失去选中状态 核心： 主要就是改变input标签的checked属性 具体代码如下： <input type="button" id="All" value="全选" /> <input type="button" id="uncheck" value="不选" /> <input type="button
asp.net +Jquery 全选与反选，客户端控件与服务器控件写法
haojuntu的专栏
12-02 990
复选框的全选以前也做过，这次写遇到的问题还不少，还是总结一下吧。      首先要引用jquery包，注意这里不要加language="javascript" ，加上是错误的，调试半天才找到原因，加上后出现语法错误               //设置全选与反选         $(function() {             //html控件写法，没有runat="server
02-全选反选-html.html
02-15
02-全选反选-html.html
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
04-全选反选.html
02-15
04-全选反选.html
使用django form生成复选框表格
热门推荐
WitsMakeMen的专栏
02-26 1万+
转自：http://www.zhimaq.com/questions/1690/django-form-checkbox from django import formsACTIVITY_STYLE = (("a", "1"), ("b", "2"), ("c", "3")) class HobbiesForm(forms.Form): hobbies = forms.Multipl
JavaScript-表单项目全选和反选
MonkeyBrothers的博客
02-05 1171
1.在生活我们经常遇到点击“全选”按钮就能够选中列表里面所有的项目，点击“反选”就能够把选中的取消掉，没选中的选上，这类功能是如何通过JavaScript代码实现的呢？下面为大家介绍下。 2.首先我们把HTML骨架搭建好，基本效果图和代码如下： 效果图： 代码实现： 全选和反选 table { margin: 0 auto; border: 1px so
javascript CheckBox 全选与取消全选
ruiguang21的博客
11-06 277
看书： 写字： 打飞机： 玩游戏： 全选/取消 var checkAll = false; function allcheck(){     checkAll = !checkAll;     let inputs = document.getElementsByName('checkbox')     for(var i =0;i }
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现
wojiushimogui的博客
05-29 2106
《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现我们都知道getElementById是通过id来获取对象，但是，当我们的对象许多且这些对象都是相同的时候，如果还使用getElementById来一个一个的来获取对象就比较坑爹了，是吧，因此，就有了getElementsByTagName来通过标签来获取对象数组。例如：var aBtn=d
checkbox全选/全不选
lwj734114646的专栏
03-30 523
注意：jquery1.6版本以后，设置checkbox是否选中用的的prop(“checked”,true)，而不是使用attr(); 网上很多用的是attr（），结果害了好多人，浪费很多时间 //全选或者全不选 function selectAll(){ if ($("#selectAll").prop("checked")) { //
使用JavaScript实现全选，全不选和反选
u_u2020的博客
05-09 2609
1使用JavaScript实现全选，全不选和反选 先写出它的布局，首先我们给他一个div来装所要写的内容，再在大的div里面放两个div和三个button按钮，button按钮就是用来放全选，全不选和反选的，第一个div是用来放标题的(选择爱好：)，而第二个div是用来放选择框和选项的，里面的选择框我们是用input标签来实...
jquery实现购物车复选框总金额的变化以及全选和反选
Debug_zhang的博客
06-09 7346
script> $(document).ready(function () { $("#checkAll").click(function () { if(this.checked == true){ $('[type=checkbox]').prop('checked', true);
ASP外观专利图像检索平台(源代码+论文).rar
07-21
ASP外观专利图像检索平台(源代码+论文)
C++课程设计：电煤气管理系统【源码+文档】
最新发布
07-21
C++课程设计：电煤气管理系统【源码+文档】 本程序是一个水电气管理信息系统，能够对高校的水电气费用进行管理, 包括了成员的基本信息，如学号、编号、姓名、成员水电气的用量等。程序的用途包括缴纳水电气费、查询一个同学水电气费用量、查看所有同学的缴费情况、增加学生信息、删除学生信息、退出系统等。在设计时也考虑到学生和教师在用水电气时的不同，学生可以免费使用一定额度的水电气，超过这个额度的以后必须付费，且付费部分水电气费的价格要高于教工的收费标准，该措施的实行是为了鼓励同学们节约资源，以免造成不必要的资源浪费。该软件主要是为了学校的管理人员提供便捷，以更快的完成水电气费用的收缴。该软件本着简洁明了，实用稳定为一体进行设计。 系统将实现以下功能： （1）实现对用户信息的录入； （2）实现水电煤气数据的录入； （3）实现计算并查询用户应缴费用，查询未缴纳费用的名单； （4）实现对人员的删除和添加；
a-checkbox-group反选和全选
08-25
可以通过在el-checkbox-group上添加一个额外的checkbox来实现全选和反选功能。通过点击这个额外的checkbox来控制el-checkbox-group中所有的checkbox的选中状态。当点击全选checkbox时，遍历el-checkbox-group中的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值