javascript 如何在javascript中的列表中插入复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31523203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert a checkbox in a list in javascript?
提问by Sara
I'm trying to create a todo list with JS. The idea is to write something in the input and when the user clicks the button, he obtains a checkbox with the text on it.
我正在尝试用 JS 创建一个待办事项列表。这个想法是在输入中写一些东西，当用户点击按钮时，他会获得一个带有文本的复选框。
The problem is that I don't know how can I do it with JS. I tried to change the 'li' to an input and then setAttribute("type", "checkbox"), but nothing happened.
问题是我不知道如何用 JS 做到这一点。我尝试将 'li' 更改为输入，然后 setAttribute("type", "checkbox")，但什么也没发生。
<!DOCTYPE html>
<html>
<head>
<title>Lista de tareas personal.</title>
<meta charset='utf-8'>
<style type="text/css">
body{
font-family: Helvetica, Arial;
}
li{
width: 50%;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Lista de tareas personal.</h1>
<hr>
<br>
<button type="button" id="btn" onclick="a?adirItems">A?adir Item</button>
<input type="text" id="texto">
<!---<ul id="lista"> </ul>-->
<ul id="ul"> </ul>
<script type="text/javascript">
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem
</script>
</body>
</html>
Any suggestions?
有什么建议？
回答by Sebastian Nette
You don't seem to use jquery, so the jquery tag wont get you helpful answers. You can create a checkbox in the same way you created your li element.
您似乎没有使用 jquery，因此 jquery 标记不会为您提供有用的答案。您可以按照创建 li 元素的相同方式创建复选框。
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
li.appendChild(checkbox);
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem;
回答by Bhavin Solanki
You can create dynamic checkbox like
您可以创建动态复选框，如
$('#containerId').append('<input type="checkbox" name="myCheckbox" />');
where containerIdis the id of the DOM element you want to add the checkbox to.
其中containerId是要添加复选框的 DOM 元素的 ID。
Or alternative syntax...
或替代语法...
$('#containerId')
.append(
$(document.createElement('input')).attr({
id: 'myCheckbox'
,name: 'myCheckbox'
,value: 'myValue'
,type: 'checkbox'
})
);
For more information See the following link: create dynamically radio button in jquery
有关更多信息，请参阅以下链接：在 jquery 中动态创建单选按钮
Here it is showing how to create radio button using jQuery, you can change the code to create Checkbox.
这里展示了如何使用 jQuery 创建单选按钮，您可以更改代码以创建复选框。
As per your requirement :
根据您的要求：
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
li.appendChild( $(document.createElement('input')).attr({
id: 'myCheckbox'
,name: 'myCheckbox'
,value: 'myValue'
,type: 'checkbox'
}));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem
回答by Juan Marcos Armella
You can read this question: Creating the checkbox dynamically using javascript?
您可以阅读这个问题：Creating the checkbox dynamic using javascript?
Just add the part of the checkbox in your code:
只需在代码中添加复选框的一部分：
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
li.appendChild(checkbox);
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
And the fiddle:
和小提琴：
