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

我正在尝试制作使用一些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>";
}

目前这只是一个粗略的测试，但是我要做的就是做到这一点，因此我只需要一个功能来处理每个不同的复选框及其变量，而无需为每个函数做出不同的功能。

我知道您要做什么。将变量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

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

最好还是尝试将Java对象与键一起作为复选框的ID。

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

相关内容

最新更新

热门标签：