在js中向HTML的列表中添加checkbox
时间: 2024-03-02 08:48:38 浏览: 19
在 JavaScript 中向 HTML 列表中添加 checkbox,可以使用以下步骤:
1. 首先,创建一个新的 `<input>` 元素,并将其类型设置为 "checkbox"。
2. 然后,创建一个新的 `<label>` 元素,并将其 `for` 属性设置为新创建的 `<input>` 元素的 id。
3. 接下来,创建一个新的 `<li>` 元素,并将其内容设置为新创建的 `<label>` 元素。
4. 最后,将新创建的 `<li>` 元素添加到列表中。
以下是一个示例代码:
```html
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// 创建新的 checkbox 元素
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "myCheckbox";
checkbox.value = "myValue";
checkbox.id = "myCheckboxId";
// 创建新的 label 元素
var label = document.createElement('label')
label.htmlFor = "myCheckboxId";
label.appendChild(document.createTextNode('My checkbox'));
// 创建新的 li 元素,并将 checkbox 和 label 添加到 li 中
var listItem = document.createElement('li');
listItem.appendChild(checkbox);
listItem.appendChild(label);
// 将新的 li 元素添加到列表中
var list = document.getElementById('myList');
list.appendChild(listItem);
</script>
```
这将在列表的末尾添加一个新的 checkbox。您可以根据需要更改 checkbox 的属性和 label 的文本。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)