jquery的DOM操作——邮件功能1)为“全选/全不选”按钮绑定click事件。 (2)查找所有的复选框,把每个复选框的checked属性值变为true或false,实现全选或全不选。 (3)为“删除邮件”按钮绑定click事件。 (4)查找所有checked属性值为true的复选框,删除其所在的行,即删除了该邮件
时间: 2024-02-11 15:09:28 浏览: 26
好的,针对您的问题,以下是一份基于 jQuery 的代码示例,实现了邮件列表的全选/全不选和邮件删除功能。请注意,为了方便理解代码,我在注释中说明了每一步的作用,您可以根据实际需求进行调整。
HTML 代码:
```html
<table id="mail-list">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>发件人</th>
<th>主题</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="mail-check"></td>
<td>sender@example.com</td>
<td>邮件主题</td>
<td>2022-01-01 12:00:00</td>
<td><button class="delete-mail">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="mail-check"></td>
<td>sender@example.com</td>
<td>邮件主题</td>
<td>2022-01-01 12:00:00</td>
<td><button class="delete-mail">删除</button></td>
</tr>
</tbody>
</table>
<button id="delete-selected">删除邮件</button>
```
JavaScript 代码:
```javascript
$(function() {
// 全选/全不选按钮点击事件
$('#check-all').click(function() {
// 查找所有的复选框
var $checkboxes = $('.mail-check');
// 将每个复选框的 checked 属性值设置为全选/全不选按钮的状态
$checkboxes.prop('checked', $(this).prop('checked'));
});
// 删除邮件按钮点击事件
$('#delete-selected').click(function() {
// 查找所有 checked 属性值为 true 的复选框所在的行,并删除
$('.mail-check:checked').closest('tr').remove();
});
});
```
以上代码实现了以下功能:
1. 点击“全选/全不选”按钮,所有复选框的状态被设置为与全选/全不选按钮相同。
2. 点击“删除邮件”按钮,所有被选中的邮件所在的行都会被删除。
需要注意的是,以上代码仅供参考,具体实现还需要结合实际需求进行调整。