需求：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. 最新Windows下c++读写锁SRWLock介绍

    https://blog.csdn.net/MoreWindows/article/details/7650574 https://blog.csdn.net/chenzhjlf/article/de ...

  2. go post 上传文件的例子

    go post 上传文件 package main import ( "bytes" "fmt" "io" "mime/multi ...

  3. 菜鸟学SSH（二）——Struts2国际化手动切换版

    国际化(internationalization,i18n)和本地化(localization,l10n)指让产品(出版物,软件,硬件等)能够适应非本地环境,特别是其他的语言和文化.程序在不修改内部代 ...

  4. 开发中遇到的一些mongoose的问题

    save方法,这个方法可以用来创建新的文档,也可以用来修改已有文档 1,save创建新文档 var Tank = mongoose.model('Tank', yourSchema); 2 var s ...

  5. Flink SQL与 SQL Parser ，calcite

    http://vinoyang.com/2017/06/12/flink-table-sql-source/ Flink Table&Sql 如何结合Apache Calcite http:/ ...

  6. Java虚拟机（JVM）概述

    JVM(Java虚拟机)是一个抽象的计算模型.就如同一台真实的机器,它有自己的指令集和执行引擎,可以在运行时操控内存区域.目的是为构建在其上运行的应用程序提供一个运行环境.JVM可以解读指令代码并与底 ...

  7. git（8）：常用命令

    Git常用操作命令收集: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v ...

  8. 线上服务CPU100%问题快速定位实战

    功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58速运技术部联合进行了一次线上 ...

  9. ThinkPad X220 完美黑苹果 Hackintosh OS X 10.11 El Capitan

    原文链接:https://www.gaojinan.com/thinkpad-x220-hackintosh-osx-10-11-el-capitan-perfect.html //Update 20 ...

  10. 设计模式之装饰模式（iOS开发，代码用Objective-C展示）

    在面向对象编程中有个重要的原则,里氏代换原则:一个软件实体如果使用的是一个父类的话,那么一定适用其子类,而且它察觉不出父类对象与子类对象的区别.也就是说,在软件设计里面,把父类替换成它的子类,程序的行 ...