jQuery实现全选与全不选功能
初始时：
实现功能后：
实现该功能的核心代码：
<script>
$(function(){ $("#selectBtn").click(function(){
console.log($("#selectBtn"));//selectBtn对应的jQuery对象
console.log(this);//selectBtn对应的DOM对象 $("tbody input[name='select']").prop("checked",this.checked);
console.log(this.checked); }); })
</script>
监测在tbody标签下input名为select的是否被勾选：
$("tbody input[name='select']").prop("checked",this.checked);
实现该功能的总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现全选与全不选功能</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){ $("#selectBtn").click(function(){
console.log($("#selectBtn"));//selectBtn对应的jQuery对象
console.log(this);//selectBtn对应的DOM对象 $("tbody input[name='select']").prop("checked",this.checked);//监测在tbody标签下input名为select的是否被勾选
console.log(this.checked); }); })
</script>
</head>
<body>
<table border="1">
<thead><tr><th><input type="checkbox" id="selectBtn"/> </th><th>付款方式 </th><th>结算方式 </th><th> 状态</th></tr></thead><!--表头-->
<tbody>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
<tr><td><input type="checkbox" name="select"/></td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
</tbody><!--内容--> </table>
</body>
</html>
实现全选与全不选功能.html
jQuery实现全选与全不选功能的更多相关文章
- jquery的checkbox 全选和全不选
今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- jQuery实现全选、全不选、反选
如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...
- jQuery checkbox 所有 全选、全不选、是否选中等
下面是网络收集: jquery判断checked的三种方法:.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或fals ...
- Jquery表格变色 复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- jquery实现radio按纽全不选和checkbox全选的实例
用jquery实现以下两个这个功能: 1.对所有单选按纽中radio全不选 单选按纽:<input type="radio" name="f1">A ...
- jquery数组之存放checkbox全选值示例代码
使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
随机推荐
- 【UML】NO.48.EBook.5.UML.1.008-【UML 大战需求分析】- 组件图（Component Diagram）
1.0.0 Summary Tittle:[UML]NO.48.EBook.1.UML.1.008-[UML 大战需求分析]- 组件图(Component Diagram) Style:DesignP ...
- powerdesign连接Oracle&Mysql
Oracle部分 想用powerDesign,需要用到oracle数据库,记录配置过程 1,安装win64_11gR2_client,选择安装方式为管理员,按默认选安装,过程大概几分钟就好 2,配置客 ...
- Centos的升级与更新
系统升级(6.5->7.2): 这里拿Centos6升级到Centos7为例: 1.查看当前CentOS版本cat /etc/redhat-release 2.更新源vim /etc/yum.r ...
- 3-Python3 环境搭建
- tensorflow mac安装方法
480 pip install https://storage.googleapis.com/tensorflow/mac/tensorflow-0.5.0-py2-none-any.whl 481 ...
- 左右两栏div布局，高度自适应
页面结构如下: <div class="container"> <div class="left"> left </div> ...
- Python random模块random/uniform/randint/choice/getrandbits/shuffle/choice/sample随机函数
1.random.random() 返回0<=n<1之间的随机实数n 2. random.uniform() 弥补了上面函数的不足,它可以设定浮点数的范围,一个是上限,一个是下限. 3. ...
- iOS 新浪微博-1.1框架升级
在iOS 新浪微博-1.0框架搭建 中,使用的是xcode5.1.1开发.现在把重整了一下框架 改为xcode7.0开发 使用cocoaPad管理第三方库 程序将托管到github上 在改为xcode ...
- 从0开始搭建vue+webpack脚手架（一）
基于多数情况下都是使用vue-cli初始化项目, 却始终未去了解其原理.从零开始搭建,可以让自己更深层次的理解框架. 首先从最基本的npm 开始, 至于安装npm 和 node就不用再赘述了,那是前端 ...
- supervison
http://blog.csdn.net/kongxx/article/details/50452357