html代码:
<html>
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
tr{
height: 40px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/gwc.js" ></script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
<input type="button" id="fx" value="反选" />
<input type="button" id="addRow" value="新增一行" />
<input type="button" id="delRow" value="删除行" />
<input type="button" id="copyRow" value="复制行" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
<td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr id="">
<td><input type="checkbox" name="chk" id="" value="2"/></td>
<td>《Java编程之道》</td>
<td>wollo</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改数量" />
<input type="button" name="" id="" value="删除" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《Python和我的故事》</td>
<td>赵老师</td>
<td>10</td>
<td>
<input type="button" name="" id="" value="修改数量" />
<input type="button" name="" id="" value="删除" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《web开发详解》</td>
<td>张老师</td>
<td>30</td>
<td>
<input type="button" name="" id="" value="修改数量" />
<input type="button" name="" id="" value="删除" />
</td>
</tr>
</table>
</body>
</html>
jq代码:
$(function(){
//确定全选和全不选操作
$("#chks").click(function(){
var flag=$(this).prop("checked")
$("input[name=chk]").prop("checked",flag)
})
//判断是否全选的操作
$("input[name=chk]").click(function(){
var flag=true
var chk=$("input[name=chk]")
chk.each(function(){
if(!$(this).prop("checked")){
flag=false
return
}
})
$("#chks").prop("checked",flag)
})
//反选按钮的操作
$("#fx").click(function(){
var chx=$("input[type=checkbox]")
chx.each(function(){
//获得每一个框的初始状态
var flag=$(this).prop("checked")
$(this).prop("checked",!flag)
})
})
})
老师有几个问题 没听明白
1. 这个this代表的是什么意思 如果是对象本身 是哪个对象 我的理解是name=chk的全部多选框 对吗
if(!$(this).prop("checked")){
2.这个代码里边 如果chk全部都被选了 那么就不进入if里边了 flag的值就是true
如果chk有一个没有被选择 那么就进入if语句里 flag的值为false 然后返回给最底下那行代码 对吗
$("input[name=chk]").click(function(){
var flag=true
var chk=$("input[name=chk]")
chk.each(function(){
if(!$(this).prop("checked")){
flag=false
return
}
})
$("#chks").prop("checked",flag)
})
3. 还有这个里边的this代表的是哪个对象 是属性type=checkbox的全部多选框吗
//反选按钮的操作
$("#fx").click(function(){
var chx=$("input[type=checkbox]")
chx.each(function(){
//获得每一个框的初始状态
var flag=$(this).prop("checked")
$(this).prop("checked",!flag)
})
})