需要統計一個按鈕上的複選框點擊它不起作用

以下表單有11個複選框..我設置腳本來執行一個按鈕的功能，該功能會顯示一個彈出框，告訴您有多少個複選框被檢查。但是，當我點擊按鈕，沒有任何反應。我認爲我的錯誤可能出現在函數代碼中，並辨別出名稱與id的使用等......但我不確定錯誤是什麼。需要統計一個按鈕上的複選框點擊它不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<style type="text/css"> 
body {background-color:Gray;} 
body {text-align:left;} 
p {text-align:center} 

</style> 

    <title>My First Project</title> 
</head> 
<body> 
<form id="form1" > 

<table align=center> 
<tr> 
<td><input type="checkbox" name="ingredients" value="sausage" /> Italian Sausage<br /></td> 
<td><input type="checkbox" name="ingredients" value="mushrooms" /> Fresh Mushrooms<br /></td> 
<td><input type="checkbox" name="ingredients" value="pepperoni" /> Pepperoni<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="onions" /> Fresh Onions<br /></td> 
<td><input type="checkbox" name="ingredients" value="ham" /> Diced Ham<br /></td> 
<td><input type="checkbox" name="ingredients" value="peppers" /> Fresh Green Peppers<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="beef" /> Beef<br /></td> 
<td><input type="checkbox" name="ingredients" value="tomatoes" /> Diced Tomatoes<br /></td> 
<td><input type="checkbox" name="ingredients" value="bacon" /> Bacon Bits<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="green" /> Green Olives<br /></td> 
<td><input type="checkbox" name="ingredients" value="olives" /> Ripe Olives<br /></td> 
</tr> 
</table> 
<br /> 

<script type="text/javascript"> 

     function anyCheck(form) { 
      var total = 0; 
      var max = form.ckbox.length; 
      for (var idx = 0; idx < max; idx++) { 
       if (eval("document.form.ckbox[" + idx + "].checked") == true) { 
        total++; 
       } 
      } 
      alert("You selected " + total + " boxes."); 
     } 


    } 
</script> 
<input type="button" name="submit" value="Submit" onclick="anyCheck(form1);" /> 
</form> 
</body> 
</html>

更新的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<style type="text/css"> 
body {background-color:Gray;} 
body {text-align:left;} 
p {text-align:center} 

</style> 

    <title>My First Project</title> 
</head> 
<body> 
<form id="form1" > 

<table align="center"> 
<tr> 
<td><input type="checkbox" name="ingredients" value="sausage" /> Italian Sausage<br /></td> 
<td><input type="checkbox" name="ingredients" value="mushrooms" /> Fresh Mushrooms<br /></td> 
<td><input type="checkbox" name="ingredients" value="pepperoni" /> Pepperoni<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="onions" /> Fresh Onions<br /></td> 
<td><input type="checkbox" name="ingredients" value="ham" /> Diced Ham<br /></td> 
<td><input type="checkbox" name="ingredients" value="peppers" /> Fresh Green Peppers<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="beef" /> Beef<br /></td> 
<td><input type="checkbox" name="ingredients" value="tomatoes" /> Diced Tomatoes<br /></td> 
<td><input type="checkbox" name="ingredients" value="bacon" /> Bacon Bits<br /></td> 
</tr> 

<tr> 
<td><input type="checkbox" name="ingredients" value="green" /> Green Olives<br /></td> 
<td><input type="checkbox" name="ingredients" value="olives" /> Ripe Olives<br /></td> 
</tr> 
</table> 
<br /> 

<script type="text/javascript"> 

    function anyCheck() { 
    var form = document.getElementById("form1"), 
     inputs = form.getElementsByTagName("input"), 
     i, 
     total = 0; 

    for (i = 0; i < inputs.length; i++) { 
     if (inputs[i].type.toLowerCase() === "checkbox" && inputs[i].checked) 
      total++; 
    } 
    alert("You selected " + total + " boxes."); 
} 


    } 
</script> 
<input type="button" name="submit" value="Submit" onclick="anyCheck();" /> 
</form> 
</body> 
</html>

來源

2012-04-04 Wilson

有你的函數調用的一個問題。 form1是未定義的。

使用document.getElementById（「form1」）;相反，像這樣：

onclick="anyCheck(document.getElementById('form1'));"

編輯： 有一些更多的問題，以及：

有沒有ckbox陣列。爲此創建一個數組，或者使用form.elements數組（它會給你所有的表單元素，然後你可以檢查它是否是複選框）。

而且你不需要調用eval。

 for (var idx = 0; idx < max; idx++) { 
      if (form.ckbox[idx].checked == true) { 
       total++; 
      } 
     }

來源

2012-04-04 21:37:24

這個工作在新的瀏覽器（IE8 +，FF 3.5 +，Chrome瀏覽器）：

function anyCheck() { 
     var total = 0; 
     var max = document.querySelectorAll('[type=checkbox]'); 
     for (var idx = 0; idx < max.length; idx++) { 
      if (max[idx].checked) { 
       total++; 
      } 
     } 
     alert("You selected " + total + " boxes."); 
}

DEMO：http://jsfiddle.net/6pNjf/1/

來源

2012-04-04 21:41:32 binarious

有幾個問題：

你需要傳遞在一個字符串或一個元素到anyCheck中。我會做一個字符串。然後，您可以使用getElementsByTagName()

遍歷各形式的項目

form = document.getElementById(form);

：

onclick="anyCheck('form1')"

內anyCheck的，你應該先把形式的實際實例到一個變量，像這樣

var inputs = form.getElementsByTagName("input"); 

for(var x = 0; x < inputs.length; x++) { 
    var input = inputs[x]; 
    if(input.type != "checkbox") continue; 

    if(input.checked) { 
     total += 1; 
    } 
}

來源

2012-04-04 21:42:27 Jordan

正如對方回答說的那樣，anyCheck()中的參數需要是對錶單的引用。我會傳入id作爲字符串，並在函數內部使用document.getElementById()。或者，如果只有一種形式，甚至不把它作爲一個參數，像這樣的東西：

function anyCheck() { 
    var form = document.getElementById("form1"), 
     inputs = form.getElementsByTagName("input"), 
     i, 
     total = 0; 

    for (i = 0; i < inputs.length; i++) { 
     if (inputs[i].type.toLowerCase() === "checkbox" && inputs[i].checked) 
      total++; 
    } 
    alert("You selected " + total + " boxes."); 
}

http://jsfiddle.net/ZxyPW/

您的代碼試圖用一個ckbox陣列不存在。我所展示的是如何選擇所有input元素，然後測試每個元素是否爲複選框。

根本不需要使用eval，當然不是在數組（或類似數組的對象）中使用索引變量。

來源

2012-04-04 21:48:51 nnnnnn

我貼我的更新的代碼，但它仍然無法正常工作.. – Wilson 2012-04-04 22:01:51

您有一個額外的收盤'}'只是你結賬前''標記（在您的原始代碼和更新代碼中） - 這是一個語法錯誤，可能會停止腳本運行。 – nnnnnn 2012-04-04 22:23:22

請嘗試此代碼。

你遇到了一些問題，你正在傳遞表單以及如何訪問表單中的元素。我也強烈建議你使用內置的JavaScript調試器來獲得IDE。VS 2010是一個免費的開發者，您可以使用它來開發html或asp.net代碼。如果你喜歡，你可以堅持直接的HTML代碼。 I.E.如果打開正確的選項，則內置一個。

要使用調試器，你可以取消註釋//調試線

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
     body 
     { 
      background-color: Gray; 
     } 
     body 
     { 
      text-align: left; 
     } 
     p 
     { 
      text-align: center; 
     } 
    </style> 
    <title>My First Project</title> 
</head> 
<body> 
    <form id="form1"> 
    <table align="center"> 
     <tr> 
      <td> 
       <input type="checkbox" name="ingredients" value="sausage" /> 
       Italian Sausage<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="mushrooms" /> 
       Fresh Mushrooms<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="pepperoni" /> 
       Pepperoni<br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="ingredients" value="onions" /> 
       Fresh Onions<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="ham" /> 
       Diced Ham<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="peppers" /> 
       Fresh Green Peppers<br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="ingredients" value="beef" /> 
       Beef<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="tomatoes" /> 
       Diced Tomatoes<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="bacon" /> 
       Bacon Bits<br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="ingredients" value="green" /> 
       Green Olives<br /> 
      </td> 
      <td> 
       <input type="checkbox" name="ingredients" value="olives" /> 
       Ripe Olives<br /> 
      </td> 
     </tr> 
    </table> 
    <br /> 
    <script type="text/javascript"> 

     function anyCheck(form) 
     { 
      //debugger; 
      var total = 0; 
      var max = form.length; 
      for (var idx = 0; idx < max; idx++) 
      { 
       var element = form[idx]; 
       if(element.type == "checkbox" && element.checked)     
       { 
        total++; 
       } 
      } 
      alert("You selected " + total + " boxes."); 
     } 
    </script> 
    <input type="button" name="submit" value="Submit" onclick="anyCheck(document.getElementById('form1'));" /> 
    </form> 
</body> 
</html>

來源

2012-04-04 21:52:54

需要統計一個按鈕上的複選框點擊它不起作用

回答

相關問題