JQuery全选反选 随其他checkbox自动勾选全选反选
工作中的代码片段 写出来留作以后对比参考
网上没找到自己想要的全选反选代码 干脆自己写了个比较臃肿的 相信还有更加简单的方法
jquery代码
===================================================
$(document).ready(function() {//当页面加载完成时
$("#select_all").click(function() {//当点击全选的checkbox时
if ($("#select_all").attr("checked")) {//如果全选的checkbox为选中状态时
$(".main-body .layout-right .huati02 table input").attr("checked", "checked");//其他的checkbox全部勾选
}
else {//如果全选的checkbox为选非中状态时
$(".main-body .layout-right .huati02 table input").attr("checked", "");//其他的checkbox全部取消勾选
}
});
$(".main-body .layout-right .huati02 table input").click(function() {//当其他的checkbox发生鼠标点击时
var result = 0;//声明一个表示结果的变量
$(".main-body .layout-right .huati02 table input").each(function() {//遍历其他的checkbox
if ($(this).attr("checked") == false) {//如果其中有没选中的checkbox
result += 1;//结果+1
}
});
if (result == 0) {//如果结果等于0表示所有的checkbox都已经勾选
$("#select_all").attr("checked", "checked");//全选的checkbox自动勾选
result = 0;//为变量重置原始值
}
else {//如果结果不等于0表示还有checkbox没有勾选
$("#select_all").attr("checked", "");//全选的checkbox不勾选
result = 0;//为变量重置原始值
}
});
});
HTML代码片段 直接拷贝过来的项目源代码 懒得精简了
====================================================
<table width="698" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" align="center" valign="middle" bgcolor="#ebebeb" class="tb-title"> </td>
<td width="75" height="35" align="center" bgcolor="#ebebeb" class="tb-title">作者</td>
<td width="380" height="35" align="center" bgcolor="#ebebeb" class="tb-title">标题</td>
<td width="123" height="35" align="center" bgcolor="#ebebeb" class="tb-title">回复/查看</td>
<td width="100" height="35" bgcolor="#ebebeb" class="tb-title">最后回复</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 </a><span class="top">[顶置]</span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">今天 11：11</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a class="green" href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 </a>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">昨天 12：12</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="jewel"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="new"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
<tr>
<td width="20" align="center" valign="middle" style="padding-left:0;"><input type="checkbox" /></td>
<td width="75" height="75" align="center" style="padding-left:0;">
<a href="" target="_blank"><img width="60" height="60" src="img/temp/009.jpg" alt="" /></a>
</td>
<td class="hid" valign="top" width="380" height="75">
<a href="" target="_blank">跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友 跪求拼货的朋友</a><span class="affix"></span>
<br />
<a class="username" href="" target="_blank">username </a><span class="date">2009-11-13</span>
</td>
<td width="123" height="75" align="center">1/12</td>
<td width="100" height="75">8-11 13：13</td>
</tr>
</table>
<div class="all">
<input id="select_all" type="checkbox" /><label for="select_all" >全选</label>
<span>批量管理：</span> <a href="javascript:void(0)">推荐给衣酷</a> <a href="javascript:void(0)">置顶/解除置顶</a> <a href="javascript:void(0)">加亮</a> <a href="javascript:void(0)">锁定/解除锁定</a> <a href="javascript:void(0)">删除</a>
</div>
CSS代码就不放上来了 能预览效果就行了
转载于:https://www.cnblogs.com/ahjesus/archive/2010/08/18/1998650.html
JQuery全选反选 随其他checkbox自动勾选全选反选相关推荐
- flex 表格勾选后 鼠标滚动会自动勾选_办公鼠里的BBA，罗技MX Anywhere 3鼠标开箱体验...
如果把罗技M905算作鼻祖的话,那么MX Anywhere系列到现在已经上市十一年了.作为高端无线办公鼠标的代表,办公外设里的BBA,罗技MX Anywhere系列的三大法宝也一直被延续,无界.优联. ...
- flex 表格勾选后 鼠标滚动会自动勾选_外设Show 篇四十五：办公鼠里的BBA做工如何，罗技MX Anywhere 3鼠标体验_鼠标...
2020-11-12 21:28:093点赞7收藏0评论 如果把罗技M905算作鼻祖的话,那么MX Anywhere系列到现在已经上市十一年了.作为高端无线办公鼠标的代表,办公外设里的BBA,罗技MX ...
- EasyUI中tree选中父节点自动选中子节点，取消子节点自动取消父节点，子节点勾选完毕自动勾选父节点
今天有需求,将树设为具有全选功能 选中父节点自动全选子节点 全选状态下,当用户取消某一个子节点,自动取消父节点的勾选 未全选状态下,用户勾选全部子节点,自动勾选对应的父节点 感觉挺简单,实际写的时候才 ...
- layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选
更: 下面连接文章就是解决checkbox只能取到最后一个值的解决办法 https://blog.csdn.net/qq_16513911/article/details/81981733 <d ...
- jquery的attr和removeAttr实现checkbox全选和取消全选问题
jquery的attr和removeAttr实现checkbox全选和取消全选问题 问题说明: 一个全选和取消全选的功能,界面效果图如下 点击全选checkbox则所有checkbox被选中或者取消选 ...
- Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...
- jquery实现checkbox的单选和全选
一.思路 全选:判断"全选"checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之 单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox ...
- Jquery获取选中复选框的值(checkBox)
jquery的checkbox取值赋值选中 <%@ page language="java" import="java.util.*" pageEncod ...
- DataGridVidw添加CheckBox。并通过一个 CheckBox来控制其全选。
嘿嘿,又是我!来吧,开始今天的 分享时间-- 公共方法绑定 DataGridView表头,此方法可以通用. private void dgVColumName(DataGridView dgvper) ...
最新文章
- 图解Transformer（完整版）！
- html块元素设置min-width,css min-width属性怎么用
- 深度学习的数学 （3）基础函数
- 【深度学习】一文弄懂CNN及图像识别(Python)
- 那些关于浏览器的趣图和幽默段子
- 改革开放成就我 感谢祖国
- python md5函数_python实现md5加密
- 携程集团副总裁王韦：探索携程度假农庄发展新路径 打造“一村一旅游目的地”...
- keep-alive + vuex + mint + Infinite scroll 保存分页列表数据
- 【原】NIO通信模型和BIO通信模型
- 面向创意设计人员的CATIA
- 北京化工大学研究生学堂在线矩阵论及其应用答案
- 刘铁猛挨踢人感言：做一个高情商的程序员
- 他们说我根本不了解企业运作
- 以太网没有有效的IP配置
- 《失控》书摘与读书笔记
- easywechat (在thinkphp5中使用easywechat完成微信网页认证)
- 企业咨询行业拓客的10个经典方法
- 对称矩阵到三对角矩阵的Lanczos推导(python,数值积分)
- 技术、产业、人才三管齐下，数字人民币渐行渐近 | 产业区块链发展周报
热门文章
- edge android apk下载地址,edge app下载-edge完整版v7.2.0 安卓版 - 极光下载站
- conda 换成清华的源_conda/pip 使用国内镜像安装第三方库
- java.lang.IllegalStateException: closed
- ConcurrentProgramming：interrupt
- 常用MYSQL日期查询
- wkhtmltopdf的介绍与使用
- python数据分析框架
- 去重除了indexOf的其他方法（使用对象Key的方法）及统计重复次数
- NGINX的奇淫技巧 —— 7. IF实现数学比较功能 (2)
- Java读取excel文件 将Excel文件变为二维String数组 .