别的不多说,直接上代码,用于完成复选框的全选与全不选。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
<script>
$(function(){
$("#select").click(function(){//使用id选择器,当按钮被点击时触发方法
$("tbody input").attr("checked",this.checked);//为每个tbody的input添加属性,this.checked表示每个input的checked属性与你点击的属性一致,这样才会实现全选与全不选 }); });
</script> </head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select" >全选/全不选</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>

原始表格:

再点击之后则会全选,再次点击则不会全选,这样进行多次重复仍然可以使用

注意当js版本不一样的时候例如用jquery-1.11.0.js,则attr()方法只能起作用一次,即只能完成一次全选和全不选,而下一个方法则很好用在低版本也可以用,其他代码不变

            $(function(){
$("#select").click(function(){//使用id选择器,当按钮被点击时触发方法
$("tbody input").prop("checked",this.checked);//为每个tbody的input添加属性,this.checked表示每个input的checked属性与你点击的属性一致,这样才会实现全选与全不选 }); });
 

还可以用遍历的方法来完成代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成复选框的全选和全不选</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#select").click(function(){
var isChecked=this.checked;
$("input[name='checkbox1']").each(function(){
this.checked=isChecked; });
}); });
</script> </head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select" name="checkbox" >全选/全不选</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne" name="checkbox1"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>

这样就可以通过遍历来完成,用isChecked变量来记录全选/全不选复选框的checked属性值然后,在通过遍历函数将每个name为checkbox1的checked属性赋值成isChecked,这样也可完成任务。如果还有别的方法会再次追加

jQuery_完成复选框的全选与全不选的更多相关文章

  1. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  2. 转发!HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  3. php处理表单中的复选框问题以及js实现全选

    做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...

  4. JQuery的复选框选中、取消、全选,全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  5. [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签,多选框的默认值显示,以及多选框数据插入到数据库,多选框数据更改到数据库

    1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...

  6. jquery如何判断checkbox(复选框)是否被选中 全选 反选

    好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...

  7. elementUi-复选框,使用v-for循环出来的复选框,默认多个值为勾选状态

    1. 使用 v-model="BottomSelectFor[index].tick" 绑定要默认勾选的状态 2.在数组中定义 tick:true,没有的字段默认为false 3. ...

  8. checkebox 全选 ,子复选框单个全部选择后,全选框也会被选择

    <script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...

  9. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 复选框QCheckBox

    复选框一共有三种状态:全选中.半选中和无选中.若一个父选项的子选项全部为选中状态,则该父选项为全选中:若子选项全部为无选中状态,则该父选项为无选中状态:若子选项既有全选中和无选中状态,则该父选项为半选 ...

随机推荐

  1. 最长上升(不下降)子序列(LIS) 不同求解方法(动规、贪心)

    给定一个序列,求出它的最长上升子序列或者是最长不下降子序列的长度 或者输出这个子序列 一.动态规划 O(n^2) 1.求长度 首先来讨论最长上升子序列的情况,即子序列是严格上升的 假如我们以dp[i] ...

  2. 【6.18校内test】T3细胞分裂

    尽管T1T2很简单,但还是阻止不了我T3wa一片 细胞分裂[题目链接] xcg同学有一个80pts的代码 他说他的代码和我的很像,可惜我比较笨,只有30pts 其实这道题考场上是想到要分解质因数了,然 ...

  3. HDU 1257 最少拦截系统 最长递增子序列

    HDU 1257 最少拦截系统 最长递增子序列 题意 这个题的意思是说给你\(n\)个数,让你找到他最长的并且递增的子序列\((LIS)\).这里和最长公共子序列一样\((LCS)\)一样,子序列只要 ...

  4. springBoot2.0配置profile

    1. 使用yaml来配置,直接配置application.yml文件 server: port: 8888 spring: profiles: active: dev # 激活生产环境 --- # 测 ...

  5. python3爬取动态网站图片

    思路: 1.图片放在<image>XXX</image>标签中 2.利用fiddler抓包获取存放图片信息的js文件url 3.利用requests库获取html内容,然后获取 ...

  6. 两张超级大表join优化

    一个简单的两表关联,SQL跑了差不多一天一夜,这两个表都非常巨大,每个表都有几十个G,数据量每个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单个进程的PGA 是绝对放不下几十个G ...

  7. IDEA配置远程git仓库

    一,在项目创建本地仓储 2,选择当前文件夹为本地仓储 3, 将代码添加到本地仓库 4,提交到本地仓库 5,提交到本地仓库 配置远程账号和地址 输入你自己的远程仓库----码云或者github,创建的 ...

  8. 090、ELK完成部署和使用 (2019-05-13 周二)

    参考https://www.cnblogs.com/CloudMan6/p/7787870.html   上节我们已经部署了容器化的ELK,本节我们学习如何将日志导入ELK并进行图形化展示.   几乎 ...

  9. SQL的编写顺序和执行顺序,以及空值处理,别名处理,转义字符处理

    SQL即结构化查询语言.也就是用来从数据库中操作数据的.数据总的来说就是增删改查CRUD. 一,sql的分类,大致有四类: 1)DDL : 数据定义语言 create alter drop trunc ...

  10. vue动态渲染图片,引用路径需要注意的地方

    1.把图片放在和src同级的static里面,这用按照正常的方式进行引入,例如: 2.图片可以在其他文件夹,但是在script引入是必须加上require <img :src="ite ...