需求

  • 制作如下可选表格，实现“全选”、“反选”、“取消”功能

代码示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!--告诉IE以最高级模式渲染文档-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <title>作业分解</title>

    <script>

        function checkAll() {

            //全选，找到所有的checkbox，全部选中

            var checkboxEles = document.getElementsByClassName("c1");

            for (var i=0;i<checkboxEles.length;i++){

                checkboxEles[i].checked=true;

            }

        }

        function reverse() {

            //反选--找标签，判断

            //1.找标签（和上面一样）

            var checkboxEles = document.getElementsByClassName('c1');

            //2.判断每个选框checkboxEles[i].checked 属性是true还是false

            //如果是true改为false；如果是false改为true

//            for循环+if判断 实现反选

//            for (var i=0;i<checkboxEles.length;i++){

//                    if (checkboxEles[i].checked=true){

//                        checkboxEles[i].checked=false;

//                    }else {

//                        checkboxEles[i].checked=true;

//                    }

//            }

//            取反，实现反选

            for (var i=0;i<checkboxEles.length;i++){

                checkboxEles[i].checked=!checkboxEles[i].checked;

            }

        }

        function cancleAll() {

            //取消选中

            var checkboxEles = document.getElementsByClassName("c1");

            for (var i=0;i<checkboxEles.length;i++){

                checkboxEles[i].checked=false;

            }

        }

    </script>

</head>

<body>

<table border="1">

    <thead>

    <tr>

        <th>#</th>

        <th>技师姓名</th>

        <th>出生年份</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td><input class="c1" type="checkbox"></td>

        <td>张三</td>

        <td>10年</td>

    </tr>

    <tr>

        <td><input class="c1" type="checkbox"></td>

        <td>李四</td>

        <td>98年</td>

    </tr>

    <tr>

        <td><input class="c1" type="checkbox"></td>

        <td>王五</td>

        <td>99年</td>

    </tr>

    <tr>

        <td><input class="c1" type="checkbox"></td>

        <td>赵六</td>

        <td>97年</td>

    </tr>

    </tbody>

</table>

<br>

<input type="button" value="全选" onclick="checkAll()">

<input type="button" value="反选" onclick="reverse()">

<input type="button" value="取消" onclick="cancleAll()">

</body>

</html>

代码示例

“反选”测试

“全选”测试

“取消”测试

此种实现方法为 JS ；

亦可用 jQuery 实现，更加简洁高效。

前端之 JS 实现全选、反选、取消选中的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

  3. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  4. jquery实现全选 反选 取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关于如何用js完成全选反选框等内容

    在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...

  6. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  7. JS实现全选，取消全选，正常选择

    //点击选择方法 onUserIdsChange(selVal) { if (this.form.groupUserIds.includes(-1) && !this.isSelect ...

  8. easyui 上 datagrid 的表头的checkbox全选时 取消选中 disabled的checkbox

    业务需求: 正常情况下,easyui的全选checkbox会选择表中全部的checkbox包括行.及时对checkbox加了disable属性也没有效果.但是现在的业务是当对checkbox加了dis ...

  9. js实现全选反选功能

    开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...

随机推荐

  1. 软件质量特征 ISO9126

    ISO/IEC9126软件质量模型是一种评价软件质量的通用模型,包括3个层次: 1.质量特性 2.质量子特性 3.度量指标 其中各六个质量特性与二十七个质量子特性的关系如下表: 1.功能性 是指当软件 ...

  2. Android Camera 使用小结。两种方法：一是调用系统camera app，二是自己写camera程序。

    源文链接:http://www.cnblogs.com/franksunny/archive/2011/11/17/2252926.html Android Camera 使用小结 Android手机 ...

  3. mongodb or and 条件拼凑 Query.And Query.Or

    查询 1月 7月 8月 的数据 list - [0] { "$or" : [{ "JobDate" : { "$gte" : ISODate ...

  4. Linux内核设计基础（五）之内存管理

    我感觉学习操作系统首先要从内存分配和管理入手. 首先我们应该知道现代操作系统是以页为单位进行内存管理的,32位体系结构支持4KB的页.而64位体系结构支持8KB的页.页是用来分配的.怎样才干进行高效和 ...

  5. RabbitMQ基础概念

    转至:http://blog.csdn.net/whycold/article/details/41119807 RabbitMQ简介 AMQP,即Advanced Message Queuing P ...

  6. android-studio于java相关

      1.安装和配置 在安装完成android-studio后,启动,配置project structure.包括SDK.JDK等,此开发工具需要自行下好,软件无自带. 配置完成后,通过:File--& ...

  7. Java中有几种类型的流？以及常见的实现类都有哪些？

    Java中有几种类型的流?以及常见的实现类都有哪些? 首先应该从两个角度来看: 从输入输出方面来讲:       Java中有输入流和输出流 从流的编码方式上来讲:    Java中有字节流和字符流 ...

  8. atom安装插件

    1. 由于墙的原因,在界面中安装不了 先安装 npm 可以下载node.js桌面版命令行 2.打开命令行中进入atom的安装目录,进入到packages 中 3. 进入github 官网 输入你要下载 ...

  9. Eclipse 创建 XML 文件

    Eclipse 创建 XML 文件 打开新建 XML 文件向导 你可以使用新建 XML 文件向导来创建 XML 文件.打开向导的方式有: 点击 File 菜单并选择 New > Other 点击 ...

  10. js yield

    meikidd 发布在meikidd2015年5月6日view:3397 在文章任何区域双击击即可给文章添加[评注]!浮到评注点上可以查看详情. 隐藏标注 首先请原谅我的标题党(●—●),tj 大神的 ...