需求：checkbox控制列表数据全选与取消全选择。

效果图：

1、html

<body >

          <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/>

          <input type="file" id="File1" name="File1" style="display:none;">

        <input type="button" name="outbtn" value="导出"/>

    <table border="1">

        <!-- <tr>

    <a href="javascript:;" class="a-upload"> </a>

            </tr>-->

        <tr>

            <td><input  id="all" type="checkbox" name="yon" onclick="chk()"/></td>

            <td>ID</td>

            <td>地区</td>

        </tr>

        <c:forEach items="${dislist }" var="dis">

            <tr>

            <td><input id="mychk" type="checkbox" name="mychk"/></td>

            <td>${dis.id }</td>

            <td>${dis.name }</td>

        </tr>

     </c:forEach>

    </table>

  </body>

2、js

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">

        /* $("#all").click(function(){

            alert("11111111");

            if(this.checked){

                alert("2222");

                $("mychk").prop("checked",true);

            }else{

                $("mychk").prop("checked",false);

            }

        }); */

        function chk(){

            var all = document.getElementById("all");

            var mychk = document.getElementsByName("mychk");

            alert("mychk长度=="+mychk.length);

            if(all.checked==true){

                alert("all.checked==true全选");

                if(mychk.length){

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

                        mychk[i].checked = true;

                    }

                }

                mychk.chcked=true;

            }else{

                alert("all.checked==false全不选");

                if(mychk.length){

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

                        mychk[i].checked = false;

                    }

                }

            }

        }

    </script>

JS对checkbox全选和取消全选的更多相关文章

  1. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  2. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  3. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  4. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  5. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  6. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

  7. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  8. checkbox 全選、取消全選、反選

    在寫一個全選.取消全選.反選的功能時. 未來元素[type='checkbox'],在使用了jquery-1.11.1.min.js版本的jquery時: 功能版本1: 存在的問題,當使用了attr時 ...

  9. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

随机推荐

  1. 菜鸟调错（二）——EJB3.0部署消息驱动Bean抛javax.naming.NameNotFoundException异常

    在部署EJB的消息驱动Bean时遇到了如下的错误: ERROR [org.jboss.resource.adapter.jms.inflow.JmsActivation] (WorkManager(2 ...

  2. dom4j: 用dom4j生成xml后第二行空行的问题

    只需要指定: format.setNewLineAfterDeclaration(false); 即可. 例: OutputFormat format = OutputFormat.createPre ...

  3. [Windows Azure] How to Create and Configure SQL Database

    How to Create and Configure SQL Database In this topic, you'll step through logical server creation ...

  4. ES6，新增数据结构Set的用法

    ES6 提供了新的数据结构 Set. 特性 似于数组,但它的一大特性就是所有元素都是唯一的,没有重复. 我们可以利用这一唯一特性进行数组的去重工作. 单一数组的去重. let set6 = new S ...

  5. Tornado使用-队列Queue

    1.tornado队列的特点 和python标准队列queue相比,tornado的队列Queue支持异步 2.Queue常用方法 Queue.get() 会暂停,直到queue中有元素 Queue. ...

  6. 如何将 iOS 工程打包速度提升十倍以上

    如何将 iOS 工程打包速度提升十倍以上   过慢的编译速度有非常明显的副作用.一方面,程序员在等待打包的过程中可能会分心,比如刷刷朋友圈,看条新闻等等.这种认知上下文的切换会带来很多隐形的时间浪费. ...

  7. HBase写入性能及改造——multi-thread flush and compaction(续：详细测试数据)[转]

    转载:http://blog.csdn.net/kalaamong/article/details/7290192 接上文啊: 测试机性能 CPU 16* Intel(R) Xeon(R) CPU   ...

  8. 【内核】linux内核启动流程详细分析

    Linux内核启动流程 arch/arm/kernel/head-armv.S 该文件是内核最先执行的一个文件,包括内核入口ENTRY(stext)到start_kernel间的初始化代码, 主要作用 ...

  9. Asp.Net MVC简单三层架构（MVC5+EF6）

    三层架构与MVC的关系 三层架构是一个分层式的软件体系架构设计,分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).分层的目的是为了实现“高内聚,低耦合”的思想,有利于系统后期的维护.更 ...

  10. js使用正则表达式实现文本框只能输入数字和小数点

    第一种情况:且限制小数点前最大3位数,小数点后最大3为三位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...