如何在javascript中的列表中插入复选框?

Sar*_*ara 1 javascript checkbox jquery

我正在尝试用 JS 创建一个待办事项列表。这个想法是在输入中写一些东西,当用户单击按钮时,他会获得一个带有文本的复选框。

\n\n

问题是我不知道如何用 JS 做到这一点。我尝试将“li”更改为输入,然后设置属性(“type”,“checkbox”),但没有任何反应。

\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title>Lista de tareas personal.</title>\n    <meta charset=\'utf-8\'>\n    <style type="text/css">\n        body{\n            font-family: Helvetica, Arial;\n        }\n        li{\n            width: 50%;\n            list-style-type: none;\n            font-size: 20px;\n        }\n    </style>\n</head>\n<body>\n    <h1>Lista de tareas personal.</h1>\n    <hr>\n    <br>\n    <button type="button" id="btn" onclick="a\xc3\xb1adirItems">A\xc3\xb1adir Item</button>\n    <input type="text" id="texto">\n\n    <!---<ul id="lista"> </ul>-->\n    <ul id="ul"> </ul>\n\n   <script type="text/javascript">\n       function addItem(){\n           var ul = document.getElementById(\'ul\'); //ul\n           var li = document.createElement(\'li\');//li\n           var text = document.getElementById(\'texto\');\n           li.appendChild(document.createTextNode(text.value));\n           ul.appendChild(li);  \n       }\n       var button = document.getElementById(\'btn\');\n       button.onclick = addItem \n   </script>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

有什么建议么?

\n

Seb*_*tte 6

您似乎没有使用 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;
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/u7f5rwjs/1/