<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".check_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <table> <thead> <tr> <th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th> <th>用户ID</th> <th>爱好</th> <th>家庭住址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check_item"></td> <td>1</td> <td>跑步</td> <td>江苏省无锡市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>2</td> <td>打球</td> <td>江苏省南京市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>3</td> <td>跳舞</td> <td>安徽省合肥市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><button class="deleteAll">批量删除</button></td>怎么可以批量删除和删除
时间: 2023-07-09 20:20:44 浏览: 103
要实现批量删除和删除功能,你需要将 HTML 代码中的批量删除按钮的类名修改为 "delete_item",即将 `<button class="deleteAll">批量删除</button>` 修改为 `<button class="delete_item">批量删除</button>`。这样,批量删除和删除按钮都可以使用类名为 "delete_item" 的类名进行触发了。
在 JavaScript 代码中,当删除按钮或批量删除按钮被点击时,使用 jQuery 的 `click` 方法来为它们绑定事件。当删除按钮被点击时,使用 `closest` 方法获取到该按钮所在的 `tr` 元素,并将其从 DOM 树中移除:
```javascript
$(".delete_item").click(function() {
$(this).closest("tr").remove();
});
```
当批量删除按钮被点击时,使用 jQuery 的 `each` 方法遍历所有被选中的复选框,再使用 `closest` 方法获取到每个复选框所在的 `tr` 元素,并将其从 DOM 树中移除:
```javascript
$(".delete_item").click(function() {
$(".check_item:checked").each(function() {
$(this).closest("tr").remove();
});
});
```
相关问题
<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".delete_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <table> <thead> <tr> <th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th> <th>用户ID</th> <th>爱好</th> <th>家庭住址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check_item"></td> <td>1</td> <td>跑步</td> <td>江苏省无锡市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>2</td> <td>打球</td> <td>江苏省南京市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>3</td> <td>跳舞</td> <td>安徽省合肥市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><button class="deleteAll">批量删除</button></td> </tr>将批量删除改正确
您需要将代码中的`$(".delete_item:checked")`修改为`$(".check_item:checked")`,因为复选框的class是`check_item`而不是`delete_item`。修改后的代码如下:
```
$(function() {
// 删除功能
$(".delete_item").click(function() {
$(this).closest("tr").remove();
});
// 批量删除功能
$(".deleteAll").click(function() {
$(".check_item:checked").each(function() {
$(this).closest("tr").remove();
});
});
});
```
另外,您需要将批量删除按钮所在的行也放入表格中,代码如下:
```
<table>
<thead>
<tr>
<th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th>
<th>用户ID</th>
<th>爱好</th>
<th>家庭住址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>1</td>
<td>跑步</td>
<td>江苏省无锡市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>2</td>
<td>打球</td>
<td>江苏省南京市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>3</td>
<td>跳舞</td>
<td>安徽省合肥市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><button class="deleteAll">批量删除</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
```
//反选功能 function changeCheck() { var checkboxs = document.getElementsByTagName('input'); for (var i = 0; i < checkboxs.length; i++) { if (checkboxs[i].type == 'checkbox') { if (checkboxs[i].checked) { checkboxs[i].checked = false; }else{ checkboxs[i].checked = true; } } } }类似该反选的全选、全不选函数怎么写
可以参考下面这个全选和全不选的函数:
```javascript
//全选函数
function selectAll() {
var checkboxs = document.getElementsByTagName('input');
for (var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].type == 'checkbox') {
checkboxs[i].checked = true;
}
}
}
//全不选函数
function deselectAll() {
var checkboxs = document.getElementsByTagName('input');
for (var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].type == 'checkbox') {
checkboxs[i].checked = false;
}
}
}
```
以上是两个简单的函数,全选函数将所有的复选框都选中,全不选函数将所有的复选框都取消选中。你可以根据自己的需要进行修改,比如可以在函数中加入参数,让用户可以选择哪些复选框要选中或取消选中。
阅读全文