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

最新推荐文章于 2023-10-23 14:09:15 发布

nrsc

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/nrsc272420199/article/details/77435712

版权

HTML_jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

nrsc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML_jQuery中关于this的理解(复选框的全选,全不选,反选)

yoyo $(function(){ $("#selectAll").click( //全选~~~全不选 function(){ //this永远代表的是dom(js)对象 //alert(this.checked); //这里之所以可以直接.checked是因为这里的this拿到的是
复制链接

扫一扫

专栏目录