比較兩個表單的複選框是否被選中

我有兩個或多個表單。並且每個表單都包含一些複選框以及文本框中顯示的檢查值。我想，當我che一些複選框的總價值將顯示在一個文本框中的形式。 我希望當我檢查一個窗體的複選框時，其他窗體的複選框將不會被檢查並返回警報。這裏是我的代碼：比較兩個表單的複選框是否被選中

<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>

來源

2011-04-28 Moumita

我需要澄清什麼，或者我的新代碼是否滿足這個問題？ – Samuel 2011-05-05 16:40:10

看一看JQuery的或JavaScript原型庫。他們是爲了做這樣的事情而建立的，應該讓它變得容易。

來源

2011-04-28 09:16:57 user693336

所有的Fistr - 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)"

來源

2011-04-28 09:19:12 hsz

沒有看到你的回答，絕對是更好的代碼:) – Samuel 2011-04-28 09:22:29

@Samuel - 謝謝:) – hsz 2011-04-28 09:23:11

我希望當我檢查一個表單的複選框，然後複選框的另一個表單將不會檢查，複選框的值也將是添加並顯示在相應的文本框中。 – Moumita 2011-04-28 09:30:43

的需要是獨特所以連接的形式添加到ID的所有ID的第一位。

而且告訴UpdateCost功能是什麼形成你工作，加入了參數

比你已經修改正確的總場，總將被計算爲每個表單你。

<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>

來源

2011-04-28 09:19:59 Samuel

其添加複選框值。但我也需要當有人檢查Form1的某個複選框時，他/她無法檢查form2.please的複選框幫助我。 – Moumita 2011-04-28 10:00:02

@Moumita我編輯了我的文章，但我沒有太多時間，所以它不是乾淨的代碼，但我認爲它現在幾乎做你所要求的。 – Samuel 2011-04-28 13:19:44

比較兩個表單的複選框是否被選中

回答

相關問題