jQuery_完成复选框的全选与全不选
别的不多说，直接上代码，用于完成复选框的全选与全不选。
<!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_完成复选框的全选与全不选的更多相关文章
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...
- php处理表单中的复选框问题以及js实现全选
做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就 ...
- JQuery的复选框选中、取消、全选，全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库
1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...
- jquery如何判断checkbox（复选框）是否被选中 全选 反选
好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...
- elementUi-复选框，使用v-for循环出来的复选框,默认多个值为勾选状态
1. 使用 v-model="BottomSelectFor[index].tick" 绑定要默认勾选的状态 2.在数组中定义 tick:true,没有的字段默认为false 3. ...
- checkebox 全选 ，子复选框单个全部选择后，全选框也会被选择
<script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...
- jquery简单实现复选框的全选与反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 复选框QCheckBox
复选框一共有三种状态:全选中.半选中和无选中.若一个父选项的子选项全部为选中状态,则该父选项为全选中:若子选项全部为无选中状态,则该父选项为无选中状态:若子选项既有全选中和无选中状态,则该父选项为半选 ...
随机推荐
- ORACLE 使用通配符进行字符串截取
ORACLE 使用通配符进行字符串截取 select regexp_substr('aa--a(1-23),b---b(32---1)','[^(,)]+',1,1) as col1, regexp_ ...
- JDBC的一些简单通用代码
JDBC的一些简单通用代码 功能包括 连接数据库 查询操作 执行sql语句 jdbc相关类的加载 关闭连接 获取数据库格式的当前时间 代码 package dao; import java.sql.C ...
- python 链接mysql
下载对应版本 安装 https://dev.mysql.com/downloads/connector/python/ 创建链接 # python 链接mysqlimport mysql.conn ...
- 140. 后缀数组（hash + 二分 / 后缀数组）
题目链接 : https://www.acwing.com/problem/content/description/142/ Hash + 二分 #include <bits/stdc++.h& ...
- allure 这么高大上的测试报告环境，5 分钟搞定
allure 的测试报告是老板喜欢的样子.如果能用上 allure,干嘛还选择其他的测试报告类型呢?python 的 pytest 单元测试框架有 allure 的插件,可以很方便的在 python ...
- java线程捕获异常
java多线程程序中,所有线程都不允许抛出未捕获的checked exception(比如sleep时的InterruptedException),也就是说各个线程需要自己把自己的checked ex ...
- node(koa2)跨域与获取cookie
欲做一个node 的网关服务,通过 cookie 做信息传递,选择框架 koa2,这里简单记录跨域处理以及 cookie 获取. 首先:解决跨域问题,使用 koa2-cros 来处理,跨域问题后端处理 ...
- JSP的9大内置对象和4打作用域对象
一.9大内置对象 二.4大内置作用域对象
- this 到底指向谁
this 的指向,是在调用函数时根据执行上下文所动态确定的. 在函数体中,简单调用该函数时(非显式/隐式绑定下),严格模式下 this 绑定到 undefined,否则绑定到全局对象 window/g ...
- 修改MIGO或者ML81N产生的会计凭证项目文本增强
在程序:MM07MFF9_F_BELEG_ERGAENZEN下做隐式增强