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。

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

1 个答案: