(1)为“全选/全不选”按钮绑定click事件。 (2)查找所有的复选框,把每个复选框的checked属性值变为true或false,实现全选或全不选。 (3)为“删除邮件”按钮绑定click事件。 (4)查找所有checked属性值为true的复选框,删除其所在的行,即删除了该邮件
时间: 2023-12-31 12:03:21 浏览: 75
jQuery实现复选框全选/取消全选/反选及获得选择的值
可以使用以下代码实现:
HTML:
```html
<table>
<thead>
<tr>
<th><input type="checkbox" id="check-all">全选/全不选</th>
<th>邮件标题</th>
<th>发件人</th>
<th>时间</th>
<th><button id="delete-btn">删除邮件</button></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>邮件标题1</td>
<td>发件人1</td>
<td>时间1</td>
<td><button class="delete-item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>邮件标题2</td>
<td>发件人2</td>
<td>时间2</td>
<td><button class="delete-item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check-item"></td>
<td>邮件标题3</td>
<td>发件人3</td>
<td>时间3</td>
<td><button class="delete-item">删除</button></td>
</tr>
</tbody>
</table>
```
JavaScript:
```javascript
// 获取全选/全不选按钮和所有复选框
var checkAll = document.querySelector('#check-all');
var checkItems = document.querySelectorAll('.check-item');
// 全选/全不选按钮的click事件处理函数
checkAll.addEventListener('click', function() {
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = checkAll.checked;
}
});
// 获取删除邮件按钮和所有删除按钮
var deleteBtn = document.querySelector('#delete-btn');
var deleteItems = document.querySelectorAll('.delete-item');
// 删除邮件按钮的click事件处理函数
deleteBtn.addEventListener('click', function() {
for (var i = 0; i < checkItems.length; i++) {
if (checkItems[i].checked) {
// 找到该复选框所在的行
var row = checkItems[i].parentNode.parentNode;
// 删除该行
row.parentNode.removeChild(row);
}
}
});
// 删除按钮的click事件处理函数
for (var i = 0; i < deleteItems.length; i++) {
deleteItems[i].addEventListener('click', function() {
// 找到该删除按钮所在的行和复选框
var row = this.parentNode.parentNode;
var checkItem = row.querySelector('.check-item');
// 删除该行
row.parentNode.removeChild(row);
// 如果该复选框是选中状态,则需要将全选/全不选按钮的状态改为false
if (checkItem.checked) {
checkAll.checked = false;
}
});
}
```
以上代码实现了全选/全不选按钮和删除邮件按钮的功能,并且可以删除选中的邮件。
阅读全文