jQuery实现全选/反选和批量删除

摘要:
'); returnfalse;}//将获得的值存储到数组varcheckData=newArray()中;检查。每个警觉的安慰日志;//将数据提交到后台进行删除}});varAlllen=$。长度-1;//总数减1 3//选中所有复选框后,选中所有;如果未选中所有复选框,请选择所有复选框但不选中它们。只要选中其中一个复选框,删除按钮将显示$。上;})//获取表函数getTrNum()下tbodytr的行数{vartrNum=$.childres.length;returtrNum;}//Js向输入框添加一个属性,删除该属性,并添加禁用的属性$。属性;$属性; 删除禁用的属性$。属性;$removeAttr;$。属性;全选/反转名称日期10001胡静2015-12-0110002马思纯2015-12-02

<%@ 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="http://t.zoukankan.com/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 cellspacing="1" cellpadding="0">

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

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

https://www.cnblogs.com/cythia/p/6663434.html

免责声明:文章转载自《jQuery实现全选/反选和批量删除》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MIPI 屏参调试损失函数下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Android系统--输入系统(六)模拟输入驱动程序

Android系统--输入系统(六)模拟输入驱动程序 1. 回顾输入子系统 简单字符设备驱动:应用程序通过调用驱动所实现的函数使能硬件。 输入子系统:由于有多个应用程序使用输入子系统,故肯定使用的是早已规定好驱动接口,我们所需要实现的这是实现硬件相关的操作。 2. 输入子系统特性 有多套open/read/write接口 当应用程序调用这些接口,驱...

RedisTemplate访问Redis数据结构(四)——Set

Redis的Set是string类型的无序集合。集合成员是唯一的,这就意味着集合中不能出现重复的数据,Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O(1)。 SetOperations提供了对无序集合的一系列操作。首先初始化spring工厂获得redisTemplate和opsForSet private RedisTempl...

jquery实现文本点击修改

直接点击文本进行修改的方式是比较快捷的,而且挺好用的,分享下,先看下效果: 页面简单表示的代码为:(这个无关紧要) <table class="tablefirst" id="radioSub"> <col style="5%"/> <col style="5%"/>...

delete、truncate、drop

    DELETE    DELETE属于数据库DML操作语言,只删除数据不删除表的结构,会走事务,执行时会触发trigger;每次从表中删除一行,并且同时将该行的的删除操作记录在redo和undo表空间中以便进行回滚(rollback)和重做操作,但要注意表空间要足够大,需要手动提交(commit)操作才能生效,可以通过rollback撤消操作。  ...

WebForm(一)——IIS服务器、开发方式和简单基础

一、B/S和C/S 1、C/S       C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据库服务器端,客户端通过数据库连接访问服务器端的数据;另一种是Socket服务器端,服务器端的程序通过Socket与客户端的程序通信。      ...

NODEJS文件上传

基于NodeJs的文件上传 kamiSDY 0.7612018.04.02 22:38:00字数 785阅读 19,969 最近,自己玩nodeJs,用上了Express框架,小白。上传文件,查了写资料。发现了有req.files这个接口,然后试了下。 使用req.files Express默认的上传路径为/tmp。如果是windows系统,会有报错。...