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

朱雀 2022-01-12 06:11 377阅读 0赞

//全选/全不选

$(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的时候删除按钮隐藏

\}

\}   \}); \});

<div id="con">

<table width="100%" cellspacing="1" cellpadding="0">

<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> </table>

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

转载于:https://www.cnblogs.com/chengshixiaonongming/p/10412807.html

发表评论取消回复

表情：

评论列表（有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现全选、多选、反选（JQuery 实现）

jQuery 实现全选、多选、反选学习内容：需求总结：学习内容：需求 jQuery 实现全选、多选、反选实现代码

绝地灬酷狼/ 2022年10月16日 11:23/ 0 赞/ 212 阅读

相关 jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

柔光的暖阳◎/ 2022年09月18日 05:00/ 0 赞/ 251 阅读

相关 yii框架全选反选批量删除

<?php namespace app\\controllers; use Yii; use yii\\filters\\AccessControl;

太过爱你忘了你带给我的痛/ 2022年07月15日 00:37/ 0 赞/ 199 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 317 阅读

相关 jquery实现全选反选操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

梦里梦外;/ 2022年06月04日 09:13/ 0 赞/ 255 阅读

相关 ssm批量删除数据，jquery:实现全选和取消全选

> 问题 > > ssm批量删除数据，jquery:实现全选和取消全选解决 1. 实现效果图 ![在这里插入图片描述][70] 2. 原理

比眉伴天荒/ 2022年05月10日 01:38/ 0 赞/ 306 阅读

相关 JQuery实现checkbox全选和反选

function selectAll(){ //id=all是全选/反选的checkbox，判断是选中还是没选中 var isChecked=$

今天药忘吃喽~/ 2022年05月08日 11:26/ 0 赞/ 231 阅读

相关 jquery 如何实现全选不选反选

<script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/

朱雀/ 2022年04月14日 01:49/ 0 赞/ 292 阅读

相关关于全选、反选，批量删除

全选/反选 //全选/反选 function checkOpposite() { //获取所有复选框name属性值为check将其存入数组

╰半夏微凉°/ 2022年04月03日 09:56/ 0 赞/ 177 阅读

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

//全选/全不选 $(function()\{ //初始化时候,删除按钮隐藏 $("input\[name='Delete'").css("display",'non

朱雀/ 2022年01月12日 06:11/ 0 赞/ 378 阅读