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

Posted 2023-05-09

【中文标题】如何在 JavaScript 中更改复选框的标签？

【英文标题】：How to change the label of a checkbox in JavaScript?

【发布时间】：2017-09-24 10:07:35

【问题描述】：

注意：愿意使用 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();
    
);

【问题讨论】：

...复选框没有文本...复选框仅包含您可以单击的方框。

为复选框创建标签

您需要在复选框后添加另一个带有 ID 的内联元素并更改该元素的 innerHTML

创建一个新标签，就像您创建输入一样，给它一些文本，并将其for 属性设置为与复选框的id 相同。

我会提交答案。

【参考方案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 的混合。

【讨论】：

好多了，非常感谢您抽出时间给出明确的答案。如果可能的话，我宁愿只使用 jQuery，但我通常只知道 vanilla 语法。再次感谢@Santi

@EthanBristow 没问题。也许这个例子和代码 cmets 可以教你一些关于 jQuery 的知识——足以帮助你重写这部分的其他代码来匹配！

会的！完成后，希望全部是 jQuery :)

@EthanBristow Have a look 并确保阅读 cmets！

非常感谢！我还有一些其他类似的功能，所以我现在要努力改变它们。另外，通过查看您的小提琴，您还帮助我理解了 jQuery 变量，我以前从未真正研究过它们，也不知道它们到底做了什么，但现在更有意义了 :)