JQuery复选框全选效果如何实现
更新时间：2020年05月08日 14:20:43 作者：朱李洛克
这篇文章主要介绍了JQuery复选框全选效果如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Js相关技术
checked属性
如何获取所有复选框：document.getElementsByName、
需求分析
在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理
技术分析
第一种方法：选择器[属性名称='属性值']
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
第二种方法：使用层级选择器来实现 tbody > tr > td > input
$("tbody > tr > td > input").prop("checked",this.checked);
第三种方法：
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
/*
表格全选和全不选
进一步确定事件: 点击事件
*/
$(function(){
//绑定点击事件
//this 代表的是当前函数的所有者
$("#checkAll").click(function(){
//获取当前选中状态
// alert(this.checked);
//获取所有分类项的checkbox
// 选择器[属性名称='属性值']
// $("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//使用层级选择器来实现 tbody > tr > td > input
// $("tbody > tr > td > input").prop("checked",this.checked); //这个可行
// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
$("input").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1px" width="600px" id="tab">
<thead>
<tr >
<td>
<input type="checkbox" id="checkAll" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jquery-1.2.6得到焦点与失去焦点的实现方法。点击“运行”后，请刷新一次。2009-05-05
jquery表单验证需要做些什么，大家知道吗？其实很简单只要做四件事情就可以顺利完成表单验证，想知道哪四件事情吗，请仔细阅读下文。2015-11-11
这篇文章主要介绍了Jquery使用val方法读写value值,实例分析了jQuery中val方法获取value值与赋值操作的相关技巧,需要的朋友可以参考下2015-05-05
jQuery UI Dialog控件中的表单无法正常提交的解决方法
研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了 动态生成的HTML元素内。2010-12-12
今天我想介绍的是一款jQuery的插件:jquery.formLocalStorage.js。通过该插件，我们可以非常简单的实现表单暂存功能2016-02-02
使用jquery为a连接绑定点击事件，具体代码如下，感兴趣的朋友可以参考下，希望可以帮助到你2013-05-05![jQuery 练习[一] 学习jquery的准备工作](//img.jbzj.com/images/xgimg/bcimg6.png)
初次尝试 jQuery, 近乎震撼! 简洁、高效、优雅、平易, 太有思想了.2010-05-05
这篇文章主要介绍了jQuery队列操作方法实例,总结出了一个简洁优雅的队列控制方法,需要的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了jquery实现简单的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了使用异步controller与jQuery实现卷帘式分页，使用异步controller与jQuery按需加载内容，当用户开始通过网站的内容滚动时进一步加载内容。,需要的朋友可以参考下2019-06-06
![jQuery 练习[一] 学习jquery的准备工作](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论