全选和全不选"/>
jQuery实现复选框全选和全不选
第一种方法：
<!--实现td框全选th框自动选的两种方法：1.根据已经选择的td框的数量，若全选则选2.遍历td框，若全选则选
-->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">table {margin: auto;}</style><script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><!--复选框全选全不选--><script type="text/javascript">//让后面的复选框和第一个一致即可function c(obj) {$(".cb").prop("checked", obj.checked)}//当下面所有的复选框全选之后自动选择最上面的那个复选框$(function() {$("table td :checkbox").click(function() {var c = $("table td :checkbox").lengthvar len = $("table td :checked").length;$("table th :checkbox").prop("checked", c == len);}) })</script></head><body><table id="table" border="1" cellspacing="" cellpadding="" width="40%"><tr id="trr"><td><button>删除</button></td></tr><tr id="tr1"><th class="thclass"><input type="checkbox" onclick="c(this)" id="cb1" /></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td class="thclass"><input type="checkbox" class="cb" /></td><td>0</td><td>手机数码</td><td>手机数码类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td class="thclass"><input type="checkbox" class="cb" /></td><td>1</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td class="thclass"><input type="checkbox" class="cb" /></td><td>2</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td class="thclass"><input type="checkbox" class="cb" /></td><td>3</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr></table><script>//表格颜色代码$("tr:even").css("background", "pink")$("tr:odd").css("background", "yellow")$("#tr1").css("background", "dimgray")$("#trr").css("background", "aliceblue")</script></body></html>
第二种方法：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="@3.7.3/dist/html5shiv.min.js"></script><script src=".js@1.4.2/dest/respond.min.js"></script><![endif]--><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="js/jquery-1.11.0.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="js/bootstrap.min.js"></script><script type="text/javascript">/*实现全选和全不选*/function a(obj) {$(".c").prop("checked", obj.checked)}/* $(function(){var a=$("table td:checked").length;var b=$("table td:checkbox").length;if(a==b){$(".c").prop("checked",true);}else{alert(223)}})*/$(function() {$("tbody input").click(function() {var a = $("#tb input").length;var b = $("#tb input:checked").length;$("th input").prop("checked", a == b)})})</script></script></head><body><h1>你好，世界！</h1><!--改变表格宽度--><!--方法一：利用div包裹（栅格系统）--><div class="container row=6"><!--方法二：直接在table中用style设置长宽--><table class="table table-hover table-bordered"><tr><th><input type="checkbox" id="thc" onclick="a(this)" />全选</th><th>学号</th><th>姓名</th><th>年龄</th></tr><tbody id="tb"><tr><td><input type="checkbox" class="c" /></td><td>1001</td><td>提莫</td><td>20</td></tr><tr><td><input type="checkbox" class="c" /></td><td>1002</td><td>德玛</td><td>52</td></tr><tr><td><input type="checkbox" class="c" /></td><td>1003</td><td>奎因</td><td>32</td></tr></tbody></table></div></body></html>
更多推荐
jQuery实现复选框全选和全不选
发布评论