我有两个或多个表单。每个表单包含一些复选框，复选框的值显示在一个文本框中。我希望，当我选中一些复选框总价值将显示在该窗体的文本框。我想，当我检查一些复选框的一种形式的其他形式的复选框将不检查，并返回一个警告。下面是我的代码:
<head>
<script>function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<5; i++) {
gn = 'budget'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost').value = sum.toFixed(2);
}
</script>
</head>
<body>
// 1st form
<form name= "form1">
<input type="checkbox" id='budget0' value="9.99" onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget
</form>
// 2nd form
<form name= "form2">
<input type="checkbox" id='budget0' value="9.99" onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='budget1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='budget2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='budget3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='budget4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">// total budget
</form>
</body>
首先- ID必须是唯一的-您不能添加两个具有相同ID的元素。
改为name="budget[0]"，依此类推。同理，totalcost -> name="totalcost"
然后将函数修改为:
function UpdateCost(input) {
var elements = input.form.elements;
var sum = 0;
var resultElement;
for ( var i = 0; i < elements.length; i++ ) {
var element = elements[i];
if ( element.type == 'checkbox' && element.checked ) {
sum += parseFloat( element.value );
} else if ( element.type == 'text' ) {
resultElement = element;
}
}
element.value = sum;
}
现在将onclick事件更改为onclick="UpdateCost(this)"
看看JQuery或Prototype Javascript库。它们就是为做这些事情而设计的，应该使它变得容易。
首先，id必须是唯一的因此，例如，将表单添加到id。
此外，通过添加参数
，告诉UpdateCost函数您正在处理的表单。那么您将已经修改了正确的total字段，并且将为您拥有的每个表单计算total。
<head>
<script>
var only_allowed_for = '';
function UpdateCost(form) {
if (only_allowed_for == '') {
only_allowed_for = form;
}
var sum = 0;
var gn, elem;
for (i=0; i<5; i++) {
gn = form + '_budget'+ i;
elem = document.getElementById(gn);
if (elem.checked == true)
if (only_allowed_for == form) {
sum += Number(elem.value);
} else {
elem.checked = false;
}
}
document.getElementById(form + '_totalcost').value = sum.toFixed(2);
}
</script>
</head>
<body>
// 1st form
<form name= "form1">
<input type="checkbox" id='form1_budget0' value="9.99" onclick="UpdateCost('form1')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form1_budget1' value="19.99" onclick="UpdateCost('form1')">Game 2 (19.99)<br>
<input type="checkbox" id='form1_budget2' value="27.50" onclick="UpdateCost('form1')">Game 3 (27.50)<br>
<input type="checkbox" id='form1_budget3' value="45.65" onclick="UpdateCost('form1')">Game 4 (45.65)<br>
<input type="checkbox" id='form1_budget4' value="87.20" onclick="UpdateCost('form1')">Game 5 (87.20)<br>
<input type="text" id="form1_totalcost" value="0.00">// total budget
</form>
// 2nd form
<form name= "form2">
<input type="checkbox" id='form2_budget0' value="9.99" onclick="UpdateCost('form2')">Game 1 ( 9.99)<br>
<input type="checkbox" id='form2_budget1' value="19.99" onclick="UpdateCost('form2')">Game 2 (19.99)<br>
<input type="checkbox" id='form2_budget2' value="27.50" onclick="UpdateCost('form2')">Game 3 (27.50)<br>
<input type="checkbox" id='form2_budget3' value="45.65" onclick="UpdateCost('form2')">Game 4 (45.65)<br>
<input type="checkbox" id='form2_budget4' value="87.20" onclick="UpdateCost('form2')">Game 5 (87.20)<br>
<input type="text" id="form2_totalcost" value="0.00">// total budget
</form>
</body>