jQuery中的prop方法（全选按钮）

最新推荐文章于 2023-10-13 21:22:40 发布

凉水不好喝

最新推荐文章于 2023-10-13 21:22:40 发布

阅读量1k

点赞数 1

分类专栏： CRM（客户关系管理系统）文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_48575500/article/details/126104711

版权

CRM（客户关系管理系统）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery中的prop方法（全选按钮）

prop方法

用来设置或返回所选元素属性的值

全选按钮

<script>
	$("#checkAll").click(function () {
			// 如果全选按钮选中，则列表中所有按钮都选中（操作tbody下面的所有子标签input，设置为当前（this）全选按钮的状态）
			// if (this.checked==true){
			// 	$("#tBody input[type='checkbox']").prop("checked", true);
			// }else {
			// 	$("#tBody input[type='checkbox']").prop("checked", false);
			// }
			//优化
			$("#tBody input[type='checkbox']").prop("checked", this.checked);
			//$("#tBody > input:checked").prop(this.checked);
		});
</script>

<div style="position: relative;top: 10px;">
  <table class="table table-hover">
    <thead>
      <tr style="color: #B3B3B3;">
        <td><input type="checkbox" id="checkAll"/></td>
        <td>名称</td>
        <td>所有者</td>
        <td>开始日期</td>
        <td>结束日期</td>
      </tr>
    </thead>
    <tbody id="tBody">
      <tr class="active">
        <td><input type="checkbox" /></td>
        <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
        <td>哈哈</td>
        <td>2020-10-10</td>
        <td>2020-10-20</td>
      </tr>
      <tr class="active">
        <td><input type="checkbox" /></td>
        <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">发传单</a></td>
        <td>嘿嘿</td>
        <td>2020-10-10</td>
        <td>2020-10-20</td>
      </tr>
    </tbody>
  </table>
  <div id="page-master"></div>
</div>