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>
