如何將複選框添加到添加的列表中？

Question

項目：購物清單

我已經創建了一個函數，它將從表單中獲取輸入。我能夠顯示用戶輸入的內容。現在我想添加一個複選框旁邊的項目顯示，所以我最終可以選擇檢查項目並將其刪除。

這是我的函數：

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>"; 
} 

我試圖創建的複選框，但它不工作，所以我評論一下。

這裏是代碼運行筆

http://cdpn.io/JGCDB

Answer 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 

的魔鬼總是在細節中。