如何引用复选框数组名称值?
How do you reference a checkbox array name value?
我有一系列复选框和关联的 select 列表。如果选中该复选框,我需要获取相应 select 选项的值,然后更改总数,但我似乎无法引用该值。这是 HTML 代码的简化版本:
<table>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR1" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR2" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr> <tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR3" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr>
<table>
$<span id="theTotalAmount">150</span>
和javascript代码:
$("input.check:checkbox").click(function(){
//run through allcheckboxes that are checked and pull corresponding select option value
for (var i = 0; i < document.getElementsByName('checkboxCK[]').length; i++)
{
//get the value of the selected option
var s = document.getElementsByName('addonR['+i+']');
var theAmount = s.options[s.selectedIndex].value;
console.log(theAmount);
//check the checkbox is checked and if so add the corresponding select value
if(document.getElementsByName('checkboxCK['+i+']').checked)
{
totalCost = totalCost+document.getElementsByName('addonR['+i+']').value;
}
}
//rewrite the html for total amount
document.getElementById("theTotalAmount").innerHTML = totalCost;
});
我正在努力引用 s 变量。它一直未定义。谁能看出为什么?
或者是否有更好的方法来实现我想要做的事情?
复选框的名称在 HTML 中的方括号之间没有数字。你不应该把一个和你的 JavaScript.
放在一起
document.getElementsByName('addonR[]')
将为您提供一个(类似数组的)HTML 具有该名称的所有元素的集合。
写
var s = document.getElementsByName('addonR[]')[i];
我有一系列复选框和关联的 select 列表。如果选中该复选框,我需要获取相应 select 选项的值,然后更改总数,但我似乎无法引用该值。这是 HTML 代码的简化版本:
<table>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR1" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR2" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr> <tr>
<td>
<input type="checkbox" name="checkboxCK[]" id="checkboxAR3" class="check" />
</td>
<td>
<select name="addonR[]" class="select-colour">
<option value="50">1 ()</option>
<option value="100">2 (0)</option>
<option value="150">3 (0)</option>
<option value="200">4 (0)</option>
</select>
</td>
</tr>
<table>
$<span id="theTotalAmount">150</span>
和javascript代码:
$("input.check:checkbox").click(function(){
//run through allcheckboxes that are checked and pull corresponding select option value
for (var i = 0; i < document.getElementsByName('checkboxCK[]').length; i++)
{
//get the value of the selected option
var s = document.getElementsByName('addonR['+i+']');
var theAmount = s.options[s.selectedIndex].value;
console.log(theAmount);
//check the checkbox is checked and if so add the corresponding select value
if(document.getElementsByName('checkboxCK['+i+']').checked)
{
totalCost = totalCost+document.getElementsByName('addonR['+i+']').value;
}
}
//rewrite the html for total amount
document.getElementById("theTotalAmount").innerHTML = totalCost;
});
我正在努力引用 s 变量。它一直未定义。谁能看出为什么?
或者是否有更好的方法来实现我想要做的事情?
复选框的名称在 HTML 中的方括号之间没有数字。你不应该把一个和你的 JavaScript.
放在一起document.getElementsByName('addonR[]')
将为您提供一个(类似数组的)HTML 具有该名称的所有元素的集合。
写
var s = document.getElementsByName('addonR[]')[i];