Question

如何制作＆＃34; li＆＃34;使用JavaScript复选框创建？我尝试了一些方法，但没有尝试。

＆＃13;

function addLi () {
    var x = document.createElement("LI");
    var t = document.createTextNode(document.getElementById('text').value);
    x.appendChild(t);
    document.getElementById("elements").appendChild(x);
    return false;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <lang>
        <title>ToDoList</title>
        <meta charset="UTF-8">
        <script src="todolist.js"></script>
    <head>
    <body>
        <div>
            <form onSubmit="return addLi();">
                <input type="text" value="Type here!" id="text">
                <input type="submit" value="Submit">
            </form>

            <ul id="elements">

            </ul>
        </div>
    </body>
</html>

＆＃13;

Answer 1

只需将input元素附加到li：

即可

function addLi () {
    var li = document.createElement("LI");
    var tn = document.createTextNode(document.getElementById('text').value);
    var cb = document.createElement("input");
    cb.type = "checkbox";

    li.appendChild(cb);
    li.appendChild(tn);
    document.getElementById("elements").appendChild(li);

    return false;
}

Fiddle

Answer 2

您可能希望添加另一个<input type="checkbox">作为li的孩子。

function addLi () {
    var x = document.createElement("LI");
    var t = document.createTextNode(document.getElementById('text').value);
    var i = document.createElement("INPUT");
    i.setAttribute("type", "checkbox");
    x.appendChild(t);
    x.appendChild(i);
    document.getElementById("elements").appendChild(x);
    return false;
}

Answer 3

类似的东西：

function addLi () {
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = "name";
    checkbox.value = "value";
    checkbox.id = "id";

    var x = document.createElement("LI");
    x.appendChild(checkbox);

    document.getElementById("elements").appendChild(x);
    return false;
}

Answer 4

我认为这可能是你想要做的事情？

function addLi () {
    var x = document.createElement("LI");

    var c = document.createElement("INPUT");
    c.setAttribute("type", "checkbox");
    x.appendChild(c);

    var t = document.createTextNode(document.getElementById('text').value);
    x.appendChild(t);
    
    document.getElementById("elements").appendChild(x);
    return false;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <lang>
        <title>ToDoList</title>
        <meta charset="UTF-8">
        <script src="todolist.js"></script>
    <head>
    <body>
        <div>
            <form onSubmit="return addLi();">
                <input type="text" value="Type here!" id="text">
                <input type="submit" value="Submit">
            </form>

            <ul id="elements">

            </ul>
        </div>
    </body>
</html>

如何为动态创建的列表项添加复选框？

4 个答案: