【前端】全选以及 $(this)与this的区别

最新推荐文章于 2025-01-06 20:07:35 发布

洛阳纸贵

最新推荐文章于 2025-01-06 20:07:35 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： ☆前端 ---------js 文章标签： $(this) this 全选

本文链接：https://blog.youkuaiyun.com/heni6560/article/details/88219803

☆前端同时被 2 个专栏收录

29 篇文章

订阅专栏

---------js

19 篇文章

订阅专栏

本文详细解析了网页表格中实现全选功能的JavaScript代码，并对比分析了jQuery中的$(this)与原生JS中的this的区别及应用场景。通过具体实例，读者可以了解如何在网页开发中有效运用这两种指针。

1.全选

<table cellpadding="0" cellspacing="0" border="0" class="stdtable stdtablecb">
	<thead>
		<tr>
			<th><input type="checkbox" class="checkall" onclick="selectAll($(this))" /></th>
			<th>编号</th>
			<th>名称</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox" /></td>
			<td>1</td>
			<td>wj</td>
		</tr>
	</tbody>
</table>

function selectAll(obj){
    // 找到tbody下input（input只有checkbox），或者html中input加上class，进行获取
    let tdInput=obj.parents("thead").next().find("input");
    if(obj.is(':checked')){
        obj.prop('checked',true);
        tdInput.prop('checked',true);
    }else{
        obj.prop('checked',false);
        tdInput.prop('checked',false);
  }
}