如何在javascript的列表中插入复选框？答案

【问题标题】：How to insert a checkbox in a list in javascript?如何在javascript的列表中插入复选框？
【发布时间】：2019-01-12 17:40:04
【问题描述】：

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

问题是我不知道如何用 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>

有什么建议吗？

【问题讨论】：

您可以使用 jQuery 的 $.replaceWith() 方法将您的 <li> 转换为 <input type="checkbox">。

标签： javascript jquery checkbox

【解决方案1】：

您似乎没有使用 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;

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

【讨论】：

【解决方案2】：

您可以创建动态复选框，如

$('#containerId').append('<input type="checkbox" name="myCheckbox" />');

其中 containerId 是要添加复选框的 DOM 元素的 ID。

或替代语法...

$('#containerId')
    .append(
       $(document.createElement('input')).attr({
           id:    'myCheckbox'
          ,name:  'myCheckbox'
          ,value: 'myValue'
          ,type:  'checkbox'
       })
    );

更多信息请查看以下链接：create dynamically radio button in jquery

这里展示了如何使用jQuery创建单选按钮，你可以更改代码来创建复选框。

根据您的要求：

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

【讨论】：

【解决方案3】：

你可以阅读这个问题：Creating the checkbox dynamically using javascript?

只需在代码中添加复选框的一部分：

 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); 
}

还有小提琴：

http://jsfiddle.net/8uwr3kpw/

【讨论】：