四、案例:使用jQuery完成复选框的全选效果

本文详细介绍如何使用jQuery的prop方法来批量修改页面上多个元素的属性,特别是checked属性,通过两种选择器实现:属性选择器和层级选择器。同时,解决在实现过程中可能遇到的常见错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 知识点

  • JQ对象修改属性的方法:$.prop("属性名","参数");
  • this关键字表示当前函数的JQ对象。

2 步骤

  • 文档加载完成事件
  • allcheck的点击事件中触发函数
  • 函数实现更改checks的checked属性改为allcheck的checked属性

3 实现一:使用属性选择器来实现

	<script>
		$(function(){
			$("#allcheck").click(function(){
				$("input[name='checks']").prop("checked",this.checked);
			});
		});
	</script>

在这里插入图片描述

4 实现二:使用层级选择器来实现

	<script>
		$(function() {
			$("#allcheck").click(function() {
				//层级选择器
				$("tbody>tr>td>input").prop("checked",this.checked);
			});
		});
	</script>

5 出现的问题

  • 把点击事件触发函数的格式写错了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值