循環瀏覽JavaScript中的複選框不起作用

Question

我目前正在構建訂單表單，但似乎我正在測試的方法是通過複選框來查看是否勾選了某個值，但無法正常工作。我究竟做錯了什麼？在邏輯上它似乎是好的 - 我會很感激任何幫助。在此先感謝:-)

<script> 
function order() 
{ 
for(i=1;i<=7;i++) 
{ 
alert(document.orderForm.order[i].checked); 
} 
} 
</script> 
    <form name='orderForm'> 
     <p>Basic choices:</p> 
     <p> 
     <input type='checkbox' id='order1' name='order1' value='90' /> 
     <label for="1">&nbsp;Nano 1GB (&pound;90)</label> 
     <br> 
     <input type='checkbox' id='order2' name='order2' value='155' /> 
     <label for="2">&nbsp;Nano 4GB (&pound;155)</label> 
     <br> 
     <input type='checkbox' id='order3' name='order3' value='200' /> 
     <label for="3">&nbsp;Video 30GB (&pound;200)</label> 
     <br> 
     <input type='checkbox' id='order4' name='order4' value='275' /> 
     <label for="4">&nbsp;Video 60GB (&pound;275)</label> 
     </p> 
     <p>Options:</p> 
     <p> 
     <input type='checkbox' id='order5' name='order5' value='90' /> 
     <label for="5">&nbsp;Engraving (&pound;10)</label> 
     <br> 
     <input type='checkbox' id='order6' name='order6' value='15' /> 
     <label for="6">&nbsp;Carrying case (&pound;15)</label> 
     <br> 
     <input type='checkbox' id='order7' name='order7' value='18' /> 
     <label for="7">&nbsp;Car power adapter (&pound;18)</label> 
     </p> 
     <p> 
     <input type="button" onClick="order();"> 
     </p> 
     <p>Order Total</p> 
     <p> 
     <input type="text" name="orderTotal" id="orderTotal"> 
     </p> 
     <p>VAT</p> 
     <p> 
     <input type="text" name="vat" id="vat"> 
     </p> 
     <p>Order Total (+VAT)</p> 
     <p> 
     <input type="text" name="orderTotal_vat" id="orderTotal_vat"> 
     </p> 
    </form> 

Answer 1

document.orderForm.order不是一個數組。事實上，它不存在。你需要像這樣建立你的ID：

function order() { 
    for(i=1;i<=7;i++) { 
     alert(document.orderForm["order" + i].checked); 
    } 
} 

這裏是a working fiddle。

Answer 2

您當前的功能實現不似乎是正確的..好與你在這裏你funnction應該是什麼樣子就像是該解決方案：

<script> 
function order() 
{ 
for(i=1;i<=7;i++) 
{ 
alert(document.getElementById("order"+i).checked); 
} 
} 
</script> 

，或者你可以修復你的名字，然後讓它工作。您嘗試使用的數組由複選框共享的名稱構成。

<script> 
function order() 
{ 
with(document.orderForm) 
    { 
for(var i = 0; i < orderName.length; i++){ 
alert(orderName[i].checked); 
} 
    } 
    } 


</script> 
    <form name='orderForm'> 
     <p>Basic choices:</p> 
     <p> 
     <input type='checkbox' id='order1' name='orderName' value='90' /> 
     <label for="1">&nbsp;Nano 1GB (&pound;90)</label> 
     <br> 
     <input type='checkbox' id='order2' name='orderName' value='155' /> 
     <label for="2">&nbsp;Nano 4GB (&pound;155)</label> 
     <br> 
     <input type='checkbox' id='order3' name='orderName' value='200' /> 
     <label for="3">&nbsp;Video 30GB (&pound;200)</label> 
     <br> 
     <input type='checkbox' id='order4' name='orderName' value='275' /> 
     <label for="4">&nbsp;Video 60GB (&pound;275)</label> 
     </p> 
     <p>Options:</p> 
     <p> 
     <input type='checkbox' id='order5' name='orderName' value='90' /> 
     <label for="5">&nbsp;Engraving (&pound;10)</label> 
     <br> 
     <input type='checkbox' id='order6' name='orderName' value='15' /> 
     <label for="6">&nbsp;Carrying case (&pound;15)</label> 
     <br> 
     <input type='checkbox' id='order7' name='orderName' value='18' /> 
     <label for="7">&nbsp;Car power adapter (&pound;18)</label> 
     </p> 
     <p> 
     <input type="button" onClick="order();"> 
     </p> 
     <p>Order Total</p> 
     <p> 
     <input type="text" name="orderTotal" id="orderTotal"> 
     </p> 
     <p>VAT</p> 
     <p> 
     <input type="text" name="vat" id="vat"> 
     </p> 
     <p>Order Total (+VAT)</p> 
     <p> 
     <input type="text" name="orderTotal_vat" id="orderTotal_vat"> 
     </p> 
    </form> 

小提琴：http://jsfiddle.net/P7CKG/

沒有用，如果你認爲使用是混淆你：

<script> 
function order() 
{ 

for(var i = 0; i < document.orderForm.orderName.length; i++){ 
alert(document.orderForm.orderName[i].checked); 
} 
} 
</script> 

Answer 3

由於表單元素未命名爲order[1],order[2]等，因此您的函數失敗：它們被命名爲order1,order2。因此，代碼document.orderForm.order[i]什麼也沒有引用。

另外，您應該避免通過document.formName機制訪問表單 - 而不是通過ID獲取元素。同樣，而不是form.elementName，請改爲使用form.elements[elementName]。根據我的經驗，這些是用戶代理之間更一致的。

function order() { 
    var frm = document.getElementById('orderForm'); 
    for(i=1;i<=7;i++) { 
     alert(frm.elements['order'+i].checked); 
    } 
    return false; 
} 

Answer 4

function order(){ 
    var arrChks = document.orderForm.getElementsByTagName('input'); 
    for(i=0;i<arrChks.length;i++){ 
     if(arrChks[i].type=='checkbox'){ 
      alert(arrChks[i].checked); 
     } 
    } 
} 

，但我建議你使用jquery或其他JavaScript框架！

完整的例子！ http://jsbin.com/amesek/

Zolved！