如何在 JavaScript 中更改复选框的标签？

Question

注意：愿意使用 jQuery，无论哪个更容易。

我有一个表单，提交时会创建一个复选框输入。提交表单时，复选框的文本应与另一个文本输入的文本相同。

当我提交表单时，复选框按预期创建，但它是空白的并且不包含来自相应文本区域的文本。

对于一个复选框，我不确定我是否应该使用 .text、.innerhtml、.val 等，我在这里看到的之前的问题似乎不必要地复杂。

HTML：

<div id="listContainer">
    <form id="listForm">
        <input type="submit" value="Add">
        <input id="listInput" class="textarea" placeholder="Add your list item here, then click submit.">
        <div id="checkboxContainer">
        </div>
    </form>

</div>

JS：

//ADD LIST ITEM
$("#listForm").submit(function(ev) {
    ev.preventDefault();
    if ($("#listInput").val() == "") {
        alert("Please enter the item name, then click 'Add'.");
    } else {
        listCount++;
        var input = $("#listInput").val();

        console.log("List Count: " + listCount);
        console.log(input);

        var cb = document.createElement('input');
        cb.id = 'input' + listCount;
        cb.type = 'checkbox';
        document.getElementById("checkboxContainer").appendChild(cb);

        var label = document.createElement('label');
        label.id = 'label' + listCount;
        $("#label" + listCount).attr("for", "input" + listCount).html(input);
        document.getElementById("checkboxContainer").appendChild(label);

        //Store the list count
        localStorage.setItem("listCount", listCount);

        //Store the list title
        localStorage.setItem("input" + listCount, input); //"Note " + noteCount + ": " + 

        this.submit();
    }
});

Answer 1

var label = document.createElement('label');
label.id = 'label' + listCount;
$("#label" + listCount).attr("for", "input" + listCount).html(input);
document.getElementById("checkboxContainer").appendChild(label);

这四行可以清理和修复。这里的问题很简单，但是你在 jQuery 和普通 JS 之间不断的来回使事情变得非常难以阅读。我建议使用其中一种方式编写 DOM 操作，但不要同时使用两种方式。

这里的错误在第三行，它使用了选择器$("label" + listCount)。此选择器将在页面上查找此元素，但是您只是创建了该元素 - 您还没有将它添加到页面中。

---

让我们纠正这个并用 jQuery 重写它：

$("<label />")                            //create new label
    .attr("id", "label" + listCount)      //set ID
    .attr("for", "input" + listCount)     //set For
    .html(input)                          //set contents
    .appendTo("#checkboxContainer");      //add to checkbox container

---

考虑使用上面的例子来重写你的复选框创建，这样你就可以避免 jQuery/plain JS 的混合。