在JavaScript中循环遍历复选框不起作用

Question

I'm currently building an order form but it seems that the method I am testing to loop through the check-boxes to see if a value is ticked or not isn't working. What am I doing wrong? In logic it seems all right - I would appreciate any help. Thanks in advance :-)

<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

Your current function implementation doesnt seem to be right.. well with the solution that you have here is how your funnction should look like:

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

or you can fix your names and then get it work. The array that you are trying to work with is constructed of a name that is shared across the checkboxes.

<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>

Fiddle: http://jsfiddle.net/P7CKG/

Without using with if you think that is confusing you:

<script>
function order()
{

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

Answer 2

document.orderForm.order is not an array. In fact, it doesn't exist. You need to build your id like this:

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

Here's a working fiddle .

Answer 3

Your function is failing because the form elements are not named order[1] , order[2] , etc: they are named order1 , order2 . Thus, the code document.orderForm.order[i] references nothing.

Also, you should avoid accessing the form through the document.formName mechanism - get the element by ID instead. Likewise, rather than form.elementName , use form.elements[elementName] instead. These are, in my experience, more consistent between user agents.

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

but i reccomend you to use jquery or another javascript framework!

Complete example! http://jsbin.com/amesek/

Zolved!