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
复选框一共有三种状态:全选中.半选中和无选中.若一个父选项的子选项全部为选中状态,则该父选项为全选中:若子选项全部为无选中状态,则该父选项为无选中状态:若子选项既有全选中和无选中状态,则该父选项为半选 ...
随机推荐
- CentOS7 nginx 最简单的安装以及设置开机启动
1. 下载tar包. 2. 解压缩tar包 3. 安装必须的部分 yum包 yum install -y gcc pcre pcre-devel openssl openssl-devel gd gd ...
- 声明一个LIst类型的数组
ArrayList[] graphArrayList = new ArrayList[4]; for(int i=0;i<graphArrayList.length;i++){ graphArr ...
- AStar 启发函数设计（老物）
作为我出山的第一篇日志,怎么也得写篇对得起我身份和地位的文章吧? 先容我吐槽一下不小心发的贴图,那个只是我不小心收藏了隔壁兄弟班的课表就别大家这么热情的 BB 我感到很有压力,额,废话不多说,立刻进入 ...
- ubuntu编译安装swoole (存多版本php时)
一 切换php版本 见 https://www.cnblogs.com/bushuwei/p/11699503.html 二 编译安装swoole 这里对pecl安装不做介绍,以下是编译安装,复制 ...
- h5与app混合开发，jsbridge
https://juejin.im/post/5bda6f276fb9a0226d18931f https://juejin.im/post/5abca877f265da238155b6bc http ...
- vue 简介 vue 项目 组件
1. 概念 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.能够为复杂的单页应用提供驱动. 2. 用法 2.1 声明式渲染 2.1.1 改变文本 {{ m ...
- 生产服务器上安装Python
2018-05-17 生产环境的服务器(以下简称内网服务器)由于安全限制,可能无法连接外网.这种情况下将无法直接使用pip命令安装python的包 一.更改pip源 - 默认pip是使用Python官 ...
- Error:Unexpected lock protocol found in lock file. Expected 3, found 49.
关于这个错误,今天研究了两三个小时的时间,查看网上的教程都解决不了问题,后来发现是自己的文件目录导入的有问题. 现在把自己关于解决这个问题的详细步骤说明一下. (1)首先,你先查看一下自己导入文件的目 ...
- Python3零基础入门学习视频+源码+课件+习题-小甲鱼
目录 1. 介绍 2. 目录 3. 下载地址 1. 介绍 适用人群 完全零基础入门,不需要任何前置知识. 课程概述 本系列教程面向零基础的同学,是一个深入浅出,通俗易懂的Python3视频教程. 前半 ...
- 2019.9.16 linux安装软件lamp
2019/9/16 Linux软件安装 方式:yum/rpm/源码安装 yum安装: yum 是通过分析RPM的包头数据后,根据各软件的相关性制作出属性相对应的解决方案,然后可以自动处理软件的相依属性 ...