<%@ page language="java" contentType="text/html; charset=utf-8"
     pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选/反选 批量删除</title>
<script type="text/javascript" src="static/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
//全选/全不选
$(function(){
   //初始化时候,删除按钮隐藏
  $("input[name='Delete'").css("display",'none');

$("#CheckAll").bind("click",function(){
    $("input[name='Check[]']").prop("checked",this.checked);
    //显示删除按钮
    if(this.checked == true){
        $("input[name='Delete'").css("display",'block');
   }else{
      $("input[name='Delete'").css("display",'none');
   }
  });

//批量删除
  $("#Delete").click(function(){
      if(confirm('确定要删除所选吗?')){
           var checks = $("input[name='Check[]']:checked");
          if(checks.length == 0){ alert('未选中任何项！');return false;}
           //将获取的值存入数组
         var checkData = new Array();
         checks.each(function(){
             checkData.push($(this).val());
    });
        alert("选中要删除的id值为:"+checkData);
        console.log("选中要删除的id值为:"+checkData);
      //提交数据到后台进行删除
   }
  });

var Alllen = $("input:checkbox").length-1; //总个数减一 3
   //当所有复选框选中时,全选勾选;当不是所有复选框选中时,全选不勾选.只要有其中一个复选框选中,删除按钮显示
    $("input[name='Check[]']").on("change",function(){
       var len = $("input[name='Check[]']:checkbox:checked").length;
       if(len==Alllen){
      //全选
        $('#CheckAll').prop('checked',true);
        $("input[name='Delete'").css("display",'block');
    }else{
        $('#CheckAll').prop('checked',false);//小于3的时候全选框不勾选
        if(len>=1){
          $("input[name='Delete'").css("display",'block');
      }else{
          $("input[name='Delete'").css("display",'none'); //等于0的时候删除按钮隐藏
      }
   }
  });
});

//获取table下tbody的tr的行数

function getTrNum(){

var trNum=$("#mytable>tbody").children("tr").length;

retur trNum;

}

//js对input框添加属性,移除属性

<1>添加disabled属性

$('#areaSelect').attr("disabled",true);

$('#areaSelect').attr("disabled","disabled");

<2>移除disabled属性

$('#areaSelect').attr("disabled",false);

$('#areaSelect').removeAttr("disabled");

$('#areaSelect').attr("disabled","");

</script>

</head>
<body>
<div id="con">
   <table id="mytable" width="100%" cellspacing="1" cellpadding="0">

<tbody>
       <tr align="left">
             <td colspan="3">全选/反选</td>
      </tr>
     <tr align="center">
            <th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
            <th>ID</th>
           <th>Name</th>
           <th>Date</th>
     </tr>
    <tr align="center">
           <td><input id='myCheck' name='Check[]' type='checkbox' value="1"></td>
          <td>10001</td>
          <td>胡静</td>
           <td>2015-12-01</td>
    </tr>
    <tr align="center">
           <td><input id='myCheck' name='Check[]' type='checkbox' value="2"></td>
           <td>10002</td>
           <td>马思纯</td>
           <td>2015-12-02</td>
    </tr>
    <tr align="center">
            <td><input id='myCheck' name='Check[]' type='checkbox' value="3"></td>
            <td>10003</td>
           <td>倪景阳</td>
          <td>2015-12-03</td>
    </tr>

</tbody>
</table>
   <div id="bottom">
     <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>
   </div>
 </div>
</body>
</html>

jQuery实现全选/反选和批量删除的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. Jquery 实现添加删除，checkbok 的全选，反全选，但是批量删除没有实现

    <!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title& ...

  5. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

  6. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  7. jquery checkbox 全选反选代码只能执行一遍，第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

  8. jquery实现全选 反选 取消

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

  9. 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别

    $("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...

随机推荐

  1. 读vue-0.6-filters.js源码

    'abc' => 'Abc' function capitalize (value) { if (!value && value !== 0) return '' value = ...

  2. set 和hash_set和海量数据的处理问题

    什么样的结构决定其什么样的性质,因为set/map/multiset/multimap都是基于RB-tree之上,所以有自动排序功能, 而hash_set/hash_map/hash_multiset ...

  3. ASOC 音频子系统框架

    基于: Mini2440 开发板, Linux 3.4.2 内核 ASOC 简介: ASoC - ALSA System on Chip,是建立在标准ALSA驱动层上,为了更好地支持嵌入式处理器和移动 ...

  4. 程序员快速掌握的UI设计技巧

    一.概要 功能与内在很关键,UI与外表也重要. 1.1.选择主色调 1.1.1.三原色 三原色指色彩中不能再分解的三种基本颜色,我们通常说的三原色,即红.黄.蓝.三原色可以混合出所有的颜色,同时相加为 ...

  5. C#新功能--命名参数

    命名参数会潜在的改变编写代码的方式.这个新功能能使代码更容易阅读和理解. 例如,看一下System.IO名称空间中的File.Copy()方法,它一般构建为 File.Copy(@"C:\m ...

  6. 百度网盘满速下载器：pandownload

    http://pandownload.com/index.html 作者提示:1.软件使用 C++ 编写2.大文件需要等待一段时间才会有下载速度3.文件名含有特殊字符可能会下载出错,请重命名再下载4. ...

  7. blfs（systemd版本）学习笔记-配置远程访问和管理lfs系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 要实现远程管理和配置lfs系统需要配置以下软件包: 前几页章节脚本的配置:https://www.cnblogs.com/ren ...

  8. java源文件与类

    一个源文件可以包含多个类, 编译的时候,每一个类生成一个字符码文件, 源文件名可以和类名不一致,但字符码文件与类名一致, 如果类是public(公共类),源文件名必须与类名一致 命名规则:源文件的路径 ...

  9. [VUE ERROR] Invalid options in vue.config.js: "publicPath" is not allowed

    项目在build的时候报的这个错误: 具体原因是因为版本支持的问题,publicPath 属性到 vue-cli 3.2.0 之后才支持,所以将 publicPaht 改成 baseUrl 即可,或者 ...

  10. KVM虚拟化研究-1

    使用qemu-img创建镜像 例子: [root@HOST31 rybtest]# qemu-img create -f raw /rybtest/test1.raw 1G 使用qemu-img查看镜 ...