如何将复选框添加到添加的列表中？

Posted 2023-05-07

【中文标题】如何将复选框添加到添加的列表中？

【英文标题】：How do I add a checkbox to an added list?

【发布时间】：2014-03-03 15:37:01

【问题描述】：

项目：购物清单

我创建了一个从表单获取输入的函数。我能够显示用户输入的内容。现在我想在显示的项目旁边添加一个复选框，这样我最终可以选择检查项目并将其删除。

这是我的功能：

function addItem() 
    var item = [];
    item = document.getElementById('items-listed');
    item.innerhtml += "<li>" + document.form.itemEntered.value + "</li>";
    // item.innerHTML += "<li><input type="checkbox" />" + document.form.itemEntered.value + "</li>";

我试图创建复选框，但它不起作用，所以我将其注释掉。

这是在 Code Pen 中运行的项目

http://cdpn.io/JGCDB

【参考方案1】：

应该这样做：

item.innerHTML += "<li><input type='checkbox'>" + document.form.itemEntered.value + "</li>";

你遇到的问题叫做逃逸。

您正在使用双引号在 JS 中生成一个字符串，因此如果您想在字符串中使用文字双引号，那么您需要对其进行转义，请研究以下代码：

item.innerHTML += "<li><input type=\"checkbox\">" + document.form.itemEntered.value + "</li>"; //good
item.innerHTML += '<li><input type="checkbox">' + document.form.itemEntered.value + '</li>'; //good
item.innerHTML += '<li><input type=\'checkbox\'>' + document.form.itemEntered.value + '</li>'; // good

item.innerHTML += "<li><input type="checkbox">" + document.form.itemEntered.value + "</li>"; //bad
item.innerHTML += '<li><input type='checkbox'>' + document.form.itemEntered.value + '</li>'; //bad

魔鬼总是在细节中。

【讨论】：

我想我必须摆脱 > 并使用单引号而不是双引号...谢谢。

<input type="checkbox"> 和 <input type="checkbox" /> 都有效，具体取决于您要验证的 HTML/xHTML 版本。大多数现代浏览器都不会在意。您遇到的问题涉及转义字符串，所有编程语言都需要正确转义。只要避开<input type="checkbox'>，你就会成为一个快乐的露营者