js写几个div复选框,再写一个按钮,点击按钮后,复选框选择的元素删除
时间: 2024-05-12 14:17:21 浏览: 14
以下是代码实现:
HTML:
```
<div>
<input type="checkbox" id="checkbox1" name="checkbox1" value="value1">
<label for="checkbox1">选项1</label>
</div>
<div>
<input type="checkbox" id="checkbox2" name="checkbox2" value="value2">
<label for="checkbox2">选项2</label>
</div>
<div>
<input type="checkbox" id="checkbox3" name="checkbox3" value="value3">
<label for="checkbox3">选项3</label>
</div>
<button id="deleteBtn">删除选中</button>
```
JS:
```
var deleteBtn = document.getElementById("deleteBtn");
deleteBtn.onclick = function() {
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.parentNode.remove();
}
};
```
上述代码实现了:选中某个多选框后点击按钮,将被选中的选项从 DOM 结构中删除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
如图示:
功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选。如果点击批量删除,删除所勾选的商品。
<input type=checkbox id=allChecks onclick=ckAll() /> 全选/全不选
//全选
function ckAll(){
var flag=document.getElementById(allChecks).checked;
var cks=document.getElementsByName(check);
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)