2013-11-04 150 views
1

下面是我的代碼,我試圖讓它顯示順序的結果,但是我不能讓它出現,我相信複選框的返回值可能不是真實的,所以我嘗試使用var checkedt5 = $("t5").is(':checked');,但我得到onclick on order不起作用的錯誤。我相信這是功能上的錯誤。HTML複選框返回值?

<html> 

<head> 
    <title>Form </title> 

<script LANGUAGE="JavaScript"> 
<!-- hide from uneducated browsers 
function Order() 
{ 
    var size = document.getElementById("pizzasize").value 
    var crust = document.getElementById("pizzacrust").value 
    var t1 = document.getElementById("t1").value 
    var t2 = document.getElementById("t2").value 
    var t3 = document.getElementById("t3").value 
    var t4 = document.getElementById("t4").value 
    var t5 = document.getElementById("t5").value 
    var checkedt1 = $("t1").is(':checked'); 
    var checkedt2 = $("t2").is(':checked'); 
    var checkedt3 = $("t3").is(':checked'); 
    var checkedt4 = $("t4").is(':checked'); 
    var checkedt5 = $("t5").is(':checked'); 



    document.write("<p>") 
document.write("Your order is in process <br /> ") 
     document.write("Pizza Size = " + size + "<br />") 
     document.write("Pizza Crust = " + crust + "<br />") 
if (checkedt1 == true) 
{ 
document.write("Toppings = " + t1 + "<br />") 
} 
if (checkedt2 == true) 
{ 
document.write("Toppings = " + t2 + "<br />") 
} 
    if (checkedt3 == true) 
    { 
document.write("Toppings = " + t3 + "<br />") 
} 
    if (checkedt4 == true) 
    { 
document.write("Toppings = " + t4 + "<br />") 
} 
    if (checkedt5 == true) 
    { 
document.write("Toppings = " + t5 + "<br />") 
} 
    document.write("Your order will be delivered as soon as possible") 

    return "" 
    } 

    // end hiding from uneducated browsers --> 
    </script> 

    <style TYPE="text/css"> 
    body 
    { 
    background-color: lightsteelblue; 
    } 
    </style> 
    </head> 

    <body> 

    <h1>Mateo's Pizzeria</h1> 
    <form> 
    <b>Pizza Size</b>: 
    <select name="pizzasize" id="pizzasize"> 
    <option value="" disabled="disabled" selected="selected">Please select a    size</option> 
    <option value="personal">Personal</option> 
    <option value="small">Small</option> 
    <option value="medium">Medium</option> 
    <option value="large">Large</option> 
    <option value="x-large">X-Large</option> 
    <option value="omg">OMG</option> 
    </select> 
    <p> 
    <b>Pizza Crust</b>: 
    <select name="pizzacrust" id="pizzacrust"> 
    <option value="" disabled="disabled" selected="selected">Please select a crust type</option> 
    <option value="thin">Thin</option> 
    <option value="thick">Thick</option> 
    <option value="sicilian">Sicilian</option> 
    </select> 
    <p> 

<b>Pizza Toppings</b>: 
    <br> 
     <input type="checkbox" name="toppings" id="t1" value="pepperoni">Pepperoni<br> 
     <input type="checkbox" name="toppings" id="t2" value="sausage">Sausage<br> 
<input type="checkbox" name="toppings" id="t3" value="mushrooms">Mushrooms<br> 
<input type="checkbox" name="toppings" id="t4" value="black-olives">Block    Olives<br> 
<input type="checkbox" name="toppings" id="t5" value="pineapple">Pineapple<br> 


    </select> 
    <p> 
    <b>Confirmed Order</b>: <output TYPE="text" NAME="output" ID="outputID" SIZE="50"    WIDTH="50" /> 
    </p><p> 
    <input TYPE="button" VALUE="Confirm Order" onClick="Order()" /> 
    </p><p> 
    <!--// <input TYPE="button" VALUE="Process Input 2" onClick="newProcess()" /> --> 
    </p></form> 

    </body> 
    </html> 

回答

0

你錯過了# for selecting by id

var checkedt1 = $("#t1").is(':checked'); 
var checkedt2 = $("#t2").is(':checked'); 
var checkedt3 = $("#t3").is(':checked'); 
var checkedt4 = $("#t4").is(':checked'); 
var checkedt5 = $("#t5").is(':checked'); 
+0

我已經加入#到每個所要求的要素,但是,我仍然無法運行 – user2951224

+0

@ user2951224包括jQuery的在你的頁面。 – Musa

+0

@Musa會不會這樣工作? – user2951224