需求：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. 从头认识java-15.7 Map（5）-介绍HashMap的工作原理-Key变了，能不能get出原来的value？（偶尔作为面试题）

    这一章节我们讨论一个比較特殊的情况Key变了,能不能get出原来的value? 答案是:有时能够,有时不能够 1.能够的情况: package com.ray.ch14; import java.ut ...

  2. Chrome多线程下载

    https://github.com/jae-jae/camtd https://aria2.github.io/ 切换到解压目录D:\Tools\aria2-1.34.0-win-64bit中,打开 ...

  3. HBase操作（Shell与Java API）

    版权声明:本文为博主原创文章,未经博主允许不得转载.     转: http://blog.csdn.net/u013980127/article/details/52443155 下面代码在Hado ...

  4. 使用typed.js实现页面上的写字功能

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

  5. listen的参数backlog的意义

    实验环境:Ubuntu16.04,内核版本:4.4.0-59-generic   根据man listen得到的解释如下:   backlog参数定义了存放pending状态(挂起.护着搁置)的连接的 ...

  6. 比较正确的 iPhone7/7+ 的进入DFU的方法是这样的

    正确的.没有歧义的.在WIndows7系统下进入DFU并刷机的方法是: 1)PC端打开iTunes,数据线连接iPhone7与PC: 2)iPhone7关机: 3)同时按下电源键和音量减键,LOGO会 ...

  7. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  8. FireFox在新标签中打开搜索结果

    原文:https://jingyan.baidu.com/article/20b68a88563a1b796cec6228.html 步骤如下: (1)在浏览器的地址栏输入:about:config, ...

  9. LeetCode: Binary Tree Inorder Traversal 解题报告

    Binary Tree Inorder Traversal Given a binary tree, return the inorder traversal of its nodes' values ...

  10. Redis 相关操作

    1.安装 下载地址:http://www.redis.cn/ 在使用Redis时,开始就遇到了问题,客户端打不开,原因是需要先开启服务端,这需要先配置—— 1.下载好redis安装包,解压安装之后,复 ...