需求：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. Dynamic Control Flow in ML

    https://arxiv.org/abs/1805.01772 https://www.leiphone.com/news/201702/cb7cPOtzFj1pgRpk.html

  2. HHH

    https://data-artisans.com/flink-forward/resources/alibabas-common-algorithm-platform-on-flink https: ...

  3. AWS产品目录

    计算 Amazon EC2:弹性虚拟机 AWS Batch:批处理计算 Amazon ECR:Docker容器管理 Amazon ECS:高度可扩展的快速容器管理服务 Amazon EKS:在AWS上 ...

  4. [Windows Azure] Windows Azure Execution Models

    Windows Azure Execution Models Windows Azure provides different execution models for running applica ...

  5. javascript基础拾遗(十二)

    1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...

  6. Shell（6）： 多线程操作及线程数

    任务需要:当我需要对一个文件夹中的文件,分别压缩的时候: 原始的代码: #!/usr/bin/shell function getdir(){ for element in `ls $1` do #e ...

  7. Android Manifest <meta-data>

    在接入第三方渠道SDK的时候,经常会看到其配置文件AndroidManifest.xml有类似如下的定义: <!-- appid --> <meta-data android:nam ...

  8. FTP主动模式和被动模式的区别【转】

    转自:http://www.cnblogs.com/xiaohh/p/4789813.html 基础知识: FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口 ...

  9. 【Bootloader】探究bootloader,分析u-boot源码

    Preface 之前也发表过关于<Bootloader启动过程分析>的文章,但是内容表达得比较抽象,大多是文字叙述,所以这里从系统和代码的角度来深入分析bootloader的启动过程. 工 ...

  10. 前端建立一个本地服务器：browser-sync

    1.安装browser-sync: npm i browser-sync --save-dev 2.在package.json中添加启动代码: "start": "./n ...