我目前正在构建一个订单表单,但似乎我正在测试的方法循环查看复选框以查看是否勾选了值不起作用。我究竟做错了什么?在逻辑上似乎没事 - 我会感激任何帮助。在此先感谢: - )
<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"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='order2' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='order3' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='order4' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='order5' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='order6' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='order7' value='18' />
<label for="7"> Car power adapter (£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>
答案 0 :(得分:1)
你当前的功能实现似乎并不正确..你在这里的解决方案是你的功能应该如何:
<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"> Nano 1GB (£90)</label>
<br>
<input type='checkbox' id='order2' name='orderName' value='155' />
<label for="2"> Nano 4GB (£155)</label>
<br>
<input type='checkbox' id='order3' name='orderName' value='200' />
<label for="3"> Video 30GB (£200)</label>
<br>
<input type='checkbox' id='order4' name='orderName' value='275' />
<label for="4"> Video 60GB (£275)</label>
</p>
<p>Options:</p>
<p>
<input type='checkbox' id='order5' name='orderName' value='90' />
<label for="5"> Engraving (£10)</label>
<br>
<input type='checkbox' id='order6' name='orderName' value='15' />
<label for="6"> Carrying case (£15)</label>
<br>
<input type='checkbox' id='order7' name='orderName' value='18' />
<label for="7"> Car power adapter (£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>
答案 1 :(得分:1)
document.orderForm.order
不是数组。实际上,它并不存在。你需要像这样构建你的id:
function order() {
for(i=1;i<=7;i++) {
alert(document.orderForm["order" + i].checked);
}
}
答案 2 :(得分:1)
您的功能失败,因为表单元素未命名为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;
}
答案 3 :(得分:1)
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!