您的位置：首页 > Web前端 > JQuery

HTML_jQuery中关于this的理解(复选框的全选,全不选,反选)

2017-08-20 23:40 337 查看

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>yoyo</title>
<!--导入jQuery-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>

<script type="text/javascript">
$(function(){
$("#selectAll").click(
//全选~~~全不选
function(){
//this永远代表的是dom(js)对象
//alert(this.checked); //这里之所以可以直接.checked是因为这里的this拿到的是
//jQuery中的dom对象,因为点击时如果没有报错且拿到了true
//则说明可以直接this.属性名来获取属性值

//然而我们应该知道jQuery获取属性值的方式并不是直接.属性名
//而是通过attr("属性名")
//   或者prop("属性名")
//alert($(this).prop("checked"));
//b.获取其他的复选框,给这些复选框添加checked属性
//$(".itemSelect").prop("checked",this.checked);  //可以
//$(".itemSelect").prop("checked",$(this).prop("checked")); //也可以
$(".itemSelect").prop("checked",$("#selectAll").prop("checked"));//当然也可以
//$(".itemSelect").attr("checked",$("#selectAll").attr("checked"));	//有问题

//这里用attr不是报错,但达不到想要的效果,所以要记住下面一句话:
//prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)

});//全选全不选

//反选
$("#fanXuan").click(
function(){
//获取所有的选择框
var $item = $(".itemSelect");

for(var i = 0; i < $item.length; i++){
//注意:下面之所以又用.属性名的方式进行操作,是因为$item[i]实际上是将jQuery对象转成了
//DOM(js)对象

//  js对象和jquery对象之间的转换
//js对象 ----->jquery对象 :    $(js对象);
//jquery对象----->js对象
//方式1:jQuery对象[index]
//方式2:jQuery对象.get(index)

$item[i].checked = !$item[i].checked;
}
});//反选

});	//页面加载成功
</script>
</head>

<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5">

全选/全不选<input type="checkbox" id="selectAll">
反选<input type="checkbox" id="fanXuan"/>
</td>
</tr>

<!--全选按钮-->
<tr>
<th>请选择您要的商品</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<!--1按钮-->
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<!--2按钮-->
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<!--3按钮-->
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
<!--4按钮-->
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td>
<a href="">修改</a>|
<a href="">删除</a>
</td>
</tr>
</table>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML_jQuery中关于this的理复选框的全选全不选反选 DOM对象和jQuery对象之间的转换

相关文章推荐

新的分享

章节导航