获取HTML中所有勾选的复选框
时间: 2023-04-11 18:02:32 浏览: 84
可以使用 JavaScript 来获取 HTML 中所有勾选的复选框,代码如下:
```javascript
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
```
这段代码会返回一个 NodeList,其中包含了所有被勾选的复选框元素。你可以遍历这个 NodeList,对每个元素进行操作。
相关问题
HTML获取所有勾选的复选框
可以使用 JavaScript 来获取所有勾选的复选框,具体代码如下:
```
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
values.push(checkboxes[i].value);
}
console.log(values);
```
这段代码会获取所有被勾选的复选框的值,并将它们存储在一个数组中。你可以根据需要对这些值进行进一步的处理。
HTML将复选框中勾选的内容删除
以下是一个实现将复选框中勾选的内容删除的HTML和JavaScript代码:
```html
<ul id="myList">
<li><input type="checkbox" value="item1"> Item 1</li>
<li><input type="checkbox" value="item2"> Item 2</li>
<li><input type="checkbox" value="item3"> Item 3</li>
</ul>
<button onclick="deleteChecked()">删除勾选项</button>
<script>
function deleteChecked() {
var list = document.getElementById("myList");
var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
var checkbox = items[i].getElementsByTagName("input")[0];
if (checkbox.checked) {
list.removeChild(items[i]);
i--;
}
}
}
</script>
```
在这个例子中,我们创建了一个包含多个带有复选框的列表。然后,我们定义了一个名为`deleteChecked()`的函数,在该函数中获取所有列表项,并检查它们中的复选框是否被勾选。如果是,我们使用`removeChild()`方法将该列表项从DOM中删除。
请注意,我们使用了`getElementsByTagName()`方法来获取列表项和复选框元素。由于这些方法返回的是HTMLCollection,因此我们需要使用循环来遍历所有元素。在循环中,我们还检查了是否删除了一个元素,如果删除了一个元素,我们需要将循环变量`i`减1,以便正确处理下一个元素。
此外,我们还添加了一个按钮,当单击该按钮时,将调用`deleteChecked()`函数,以删除所有勾选的列表项。