Question

我正在尝试使用一些html复选框表单对象制作小应用程序。无论何时打开或关闭任何复选框，它都会运行一个函数，然后更改每个复选框的唯一变量值。如何使用函数的参数 - 或其他方法 - 我能够在点击其中一个复选框时定位相应的变量？目前，我正在尝试完成这项工作。

HTML：

 <form action="" method="get" name="orderForm">
<input name="Test" type="checkbox" value="test" onchange="checkClick('1','5.00')" />Test 1<br />
<input name="Test" type="checkbox" value="test2" onchange="checkBoxClick('2','3.00')" />Test 2 <br />
<input name="Test" type="checkbox" value="test3" onchange="checkBoxClick('3','4.00')" />Test 3 <br />

和Javascript：

//set global vars
var check1 = 0.00;
var check2 = 0.00;
var check3 = 0.00;

function checkClick(num,cost) {
    if (check+num == 0.00) {
        check+num = cost;
    }
    else {
        check+num = 0.00;
    }
    checkBoxClick();
}

function checkBoxClick() {
    document.getElementById("otherContainer").innerHTML = "<p>" + check1 + "<br />" + check2 + "<br />" + check3 + "<br />" + check4 + "</p>";
}

目前它只是一个粗略的测试，但我想要做的就是这样做我只需要一个能处理每个不同复选框及其变量的函数而不必制作每个人都有不同的功能。

Answer 1

我明白你要做什么。改为将变量check设为数组：

var check = [ 0.00, 0.00, 0.00 ];

另外，将参数作为数字传递：

checkClick(1, 5.00)

但是由于数组是0索引的，所以从0开始而不是1：

checkClick(0, 5.00)

您曾在check+num用check[num]替换它。

结果如下：

var check = [ 0.00, 0.00, 0.00 ];

function checkClick(num, cost) {
    if (check[num] == 0.00) {
        check[num] = cost;
    } else {
        check[num] = 0.00;
    }
    checkBoxClick();
}

function checkBoxClick() {
    document.getElementById("otherContainer").innerHTML = "<p>" + check[1] + "<br />" + check[2] + "<br />" + check[3] + "<br />" + check[4] + "</p>";
}

BTW，当你从未制作check4变量时，你正在使用check4 ...

Answer 2

恩HTML：

<input name="Test" type="checkbox" value="test" onchange="checkClick(this,'5.00')" />Test 1<br />
<input name="Test" type="checkbox" value="test2" onchange="checkClick(this,'3.00')" />Test 2 <br />
<input name="Test" type="checkbox" value="test3" onchange="checkClick(this,'4.00')" />Test 3 <br />

En Javascript：

function checkClick(element,cost) {
   switch (element.value) {
      case 'test':
         check1 = (element.checked) ? cost : 0;  
         break;
      case 'test2':
         check2 = (element.checked) ? cost : 0;  
         break;
      case 'test3':
         check3 = (element.checked) ? cost : 0;
         break;
      }
      checkBoxClick();
}

Answer 3

使用数组而不是三个单独的变量。然后根据传递给函数的数字修改数组元素。

更好的是，尝试使用带有键的java对象作为复选框的id。

使用javascript函数参数来影响不同的变量

3 个答案: