我对Java语言非常陌生，因此欢迎您输入任何内容。
我在创建用于删除所选复选框的功能时遇到问题。我尝试了很多事情，但最终只是删除了整个功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shopping List</title>
<script>
/*
Create a shopping list program using javascript. The page should have a text input, an “add” button, a “delete checked” button, and a list of items. Each item should have a checkbox next to it. If you fill out the text input and click” add,” it should add a list item to the end of the list. If you check a box (or boxes) next to a list item then click “delete checked,” it should remove the list items that were checked. Style the page using CSS.
*/
function addIt() {
var list = document.getElementById("list"); //used to grab the parent level "list"
var li = document.createElement("li"); //creates a "li" in the document
var userTxt = document.getElementById("product"); //used to grab the user text input "product"
var childText = userTxt.value; //returns the userTxt value and sets it equal to childText
var childTextNode = document.createTextNode(childText); //creates a textNode in the document based on what the user entered in the "product" text field
var chkBox = document.createElement("input"); //creates a new input based on the user input
chkBox.type = "checkbox"; //creates a checkbox next to the user input from "product"
//form the relationship
li.appendChild(chkBox); //
li.appendChild(childTextNode); //
//attach to the parent element
list.appendChild(li); //
inputText.value = "";
inputText.focus();
}
</script>
</head>
<body>
<div id="content">
<h1>Shopping Cart</h1>
<input id="product" type="text" />
<input type="button" id="Add" value="Add" onclick="addIt()" />
<input type="button" id="Delete" value="Delete" onclick="deleteIt()" />
<ul id="list">
<li>
<input type="checkbox" />Eggs</li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
以html输入（添加了名称标签）
<ul id="list">
<li><input type="checkbox" name='food'>Eggs</input></li>
</ul>
添加时（在addIt（）中将名称添加到复选框）
chkBox.type="checkbox";
chkBox.name = 'food';
现在deleteIt函数
function deleteIt(){
var food = document.getElementsByName('food'); // get the checkbox
for (i=0; i<food.length; i++) // loop through it
{
// if the current state is checked, unchecked and vice-versa
if (food[i].checked) // if its checked
{
var remElm = food[i]; // element to be removed
var list=document.getElementById("list"); // also li to be removed
food[i].nextSibling.nodeValue = ''; // Text value set to
remElm.parentNode.removeChild(remElm);
ul = document.getElementsByTagName('ul')[0];
li = ul.getElementsByTagName('li');
ul.removeChild(li[i]);
} else {
}
}
}