<!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>
<title>Pizza</title>
<script type="text/javascript">
function prepza() {
var checkboxes = document.forms["pizzaform"].topppingcheck.length;
var newelement = document.createElement("p");
newelement.setAttribute("id", "orderheading");
newelement.appendChild(document.createTextNode("This pizza will have:")); for (var i = 0; i < checkboxes; i++) {
if (document.forms["pizzaform"].toppingcheck[i].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(document.forms["pizzaform"].toppingcheck[i].value));
}
}
}
</script>
</head>
<body>
<form id = "pizzaform" action="#" onsubmit="return false;">
<p>Toppings:</p>
<input type = "checkbox" id="topping1" value ="Sausage" name = "toppingcheck" />Sausage<br />
<input type = "checkbox" id="topping2" value ="Pepperoni" name = "toppingcheck" />Pepperoni<br />
<input type = "checkbox" id="topping3" value ="Ham" name = "toppingcheck" />Ham<br />
<input type = "checkbox" id="topping4" value ="Green Peppers" name = "toppingcheck" />Green Peppers<br />
<input type = "checkbox" id="topping5" value ="Mushrooms" name = "toppingcheck" />Mushrooms<br />
<input type = "checkbox" id="topping6" value ="Onions" name = "toppingcheck" />Onions<br />
<input type = "checkbox" id="topping7" value ="Pineapple" name = "toppingcheck" />Pineapple<br />
<p>
<input type="submit" id="formsubmit" name="formsubmit" value="Prep Pizza" onclick="prepza();" />
</p>
</form>
</body>
</html>复选框出来了，但是为什么点击Prep Pizza按钮没有显示我已经选中的Toppings，求各位大侠们帮帮忙啊，要去上课了，说的不详细，大家见谅
function prepza() {
var checkboxes =document.getElementsByName("toppingcheck");
var newelement = document.createElement("p");
newelement.setAttribute("id", "orderheading");
newelement.appendChild(document.createTextNode("This pizza will have:")); for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(document.forms["pizzaform"].toppingcheck[i].value));
}
}
}
</script>
可以了
<head>
<title>Pizza</title>
<script type="text/javascript">
function prepza() {
//var checkboxes = document.forms["pizzaform"].topppingcheck.length;
var checkboxes = document.getElementById("pizzaform").childNodes;
var newelement = document.createElement("p");
newelement.setAttribute("id", "orderheading");
newelement.appendChild(document.createTextNode("This pizza will have:"));
document.body.appendChild(newelement);//这一步不要忘了。 for (var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].type == "checkbox")//判断类型
{
if(checkboxes[i].checked){
//if (document.forms["pizzaform"].toppingcheck[i].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(checkboxes[i].value));
}
}
}
}
</script>
</head>
<body>
<p>Toppings:</p>
<form id = "pizzaform" action="#" onsubmit="return false;">
<input type = "checkbox" id="topping1" value ="Sausage" name = "toppingcheck" />Sausage<br />
<input type = "checkbox" id="topping2" value ="Pepperoni" name = "toppingcheck" />Pepperoni<br />
<input type = "checkbox" id="topping3" value ="Ham" name = "toppingcheck" />Ham<br />
<input type = "checkbox" id="topping4" value ="Green Peppers" name = "toppingcheck" />Green Peppers<br />
<input type = "checkbox" id="topping5" value ="Mushrooms" name = "toppingcheck" />Mushrooms<br />
<input type = "checkbox" id="topping6" value ="Onions" name = "toppingcheck" />Onions<br />
<input type = "checkbox" id="topping7" value ="Pineapple" name = "toppingcheck" />Pineapple<br />
<input type="submit" id="formsubmit" name="formsubmit" value="Prep Pizza" onclick="prepza();" />
</form>
</body>
</html>
<head>
<title>Pizza</title>
<script type="text/javascript">
function getElementsByName(parentElem, name){
var childNodes = parentElem.childNodes;
var childElems = [];
for(var i in childNodes){
if(childNodes[i].name === name){
childElems.push(childNodes[i]);
}
}
return childElems;
}
function prepza() {
var form = document.forms["pizzaform"];
var checkboxes = getElementsByName(form, 'toppingcheck');
var newElemHead = document.createElement("h3");
newElemHead.setAttribute("id", "orderheading");
document.body.appendChild(newElemHead);
newElemHead.appendChild(document.createTextNode("This pizza will have:"));
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
var newelement = document.createElement("div");
newelement.setAttribute("id", "newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(checkboxes[i].value));
}
}
}
</script>
</head>
<body>
<form id = "pizzaform" action="#" onsubmit="return false;">
<p>Toppings:</p>
<input type = "checkbox" id="topping1" value ="Sausage" name = "toppingcheck" />Sausage<br />
<input type = "checkbox" id="topping2" value ="Pepperoni" name = "toppingcheck" />Pepperoni<br />
<input type = "checkbox" id="topping3" value ="Ham" name = "toppingcheck" />Ham<br />
<input type = "checkbox" id="topping4" value ="Green Peppers" name = "toppingcheck" />Green Peppers<br />
<input type = "checkbox" id="topping5" value ="Mushrooms" name = "toppingcheck" />Mushrooms<br />
<input type = "checkbox" id="topping6" value ="Onions" name = "toppingcheck" />Onions<br />
<input type = "checkbox" id="topping7" value ="Pineapple" name = "toppingcheck" />Pineapple<br />
<p>
<input type="submit" id="formsubmit" name="formsubmit" value="Prep Pizza" onclick="prepza();" />
</p>
</form>
</body>
</html>