需求：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. 常用sql自定义函数

    --把数字转为千分位格式的字符串显示,调用如 select dbo.f_splitstr(11111111111111) CREATE FUNCTION [dbo].[f_splitstr]( @st ...

  2. android studio - No compatible file types found

    今天在使用AS新建一个C++类时候,输完了类名,对话框却显示下面的提示,一直不知道为什么 [解决方案] 在app目录下的build.gradle文件中添加下列代码: externalNativeBui ...

  3. 【设计模式】适配器模式与Reader、InputStream之间的适配

    简述 适配器模式,目的是将A对象通过适配.转换的方式转换成B对象来使用,为什么转换为B对象?因为用户通过依赖B对象来使用. 适配器的实现有两种方式. 继承实现 组合实现 基于Java单继承的机制,组合 ...

  4. 【转】Python 字典中的中文输出问题

    import json dict = {'Title': '这是标题'} print json.dumps(dict, ensure_ascii=False, encoding='UTF-8') #结 ...

  5. java 多线程 28 ： 多线程组件之 Semaphore 信号量

    Semaphore是非常有用的一个组件,它相当于是一个并发控制器,是用于管理信号量的.构造的时候传入可供管理的信号量的数值,这个数值就是控制并发数量的,就是同时能几个线程访问.我们需要控制并发的代码, ...

  6. S3C2440的七种模式之——未定义模式（去掉bl print1 bug解决）

    现在做第一个实验,模拟未定义模式. 未定义模式,是cpu遇到自己不能识别的指令时候做出的异常处理. arm指令的机器码一定是按照某种规范要求的,不然你随意写一条指令,cpu不是都可以执行吗?在cpu没 ...

  7. C#学习笔记（11）——深入事件，热水器案例

    说明(2017-6-14 15:04:13): 1. 热水器案例,为了便于理解,采用了蹩脚但直观的英文命名,哼哼. heater类,加热,声明一个委托,定义一个委托事件: using System; ...

  8. 对象序列化为何要定义serialVersionUID的来龙去脉

    在很多应用中,需要对某些对象进行序列化,让它们离开内存空间,入住物理硬盘,以便长期保存.比如最常见的是Web服务器中的Session对象,当有10万用户并发访问,就有可能出现10万个Session对象 ...

  9. struts学习笔记

    ------struts in action 读书笔记 1. ActionServlet:Struts 的ActionServlet控制导航流.当ActionServlet从容器接到一个请求,它使用U ...

  10. Android RecyclerView网格布局

    一个简单的网格布局activity_main.xml <?xml version="1.0" encoding="utf-8"?> <andr ...