/ / Potrzeba zliczania pól wyboru przy kliknięciu przycisku nie działa - javascript, html, formularze, funkcja, pole wyboru

Trzeba policzyć pola wyboru przy kliknięciu przycisku nie działa - javascript, html, formularze, funkcje, pole wyboru

Poniższy formularz zawiera 11 pól wyboru. Ustawiłem skrypt, aby wykonywał funkcję po kliknięciu przycisku, który wyświetliłby okienko informujące, ile pól wyboru zostało zaznaczonych. Jednak po kliknięciu przycisku nic się nie dzieje. Myślę, że mój błąd może być w kodzie funkcji i rozróżnienie użycia nazwy kontra id itp ... Ale nie jestem pewien co to była za pomyłka.

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

ZAKTUALIZOWANY KOD:

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

Odpowiedzi:

0 dla odpowiedzi № 1

Jest kilka problemów:

Musisz przekazać ciąg lub element do anyCheck. Zrobiłbym ciąg.

onclick="anyCheck("form1")"

Wewnątrz funkcji AnyCheck powinieneś najpierw pobrać rzeczywistą instancję formularza do zmiennej, na przykład:

form = document.getElementById(form);

Następnie można przechodzić przez każdy z elementów w formularzu za pomocą getElementsByTagName()

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

0 dla odpowiedzi nr 2

Wystąpił problem w wywołaniu funkcji. Form1 jest niezdefiniowany.

Użyj document.getElementById ("form1"); zamiast tego:

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

Edytować: Jest jeszcze trochę problemów:

Nie ma tablicy ckbox, utwórz dla niej tablicę lub skorzystaj z tablicy form.elements (która da ci wszystkie elementy formularza, a następnie sprawdź, czy jest to pole wyboru czy nie).

I nie musisz dzwonić eval.

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

0 dla odpowiedzi № 3

Działa to w nowszych przeglądarkach (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.");
}

PRÓBNY: http://jsfiddle.net/6pNjf/1/


0 dla odpowiedzi nr 4

Jak powiedzieli inni odpowiedzieli, parametr w anyCheck() musi być odniesieniem do formularza. Przekażę id jako ciąg znaków i użyję go document.getElementById() wewnątrz funkcji. Lub, jeśli istnieje tylko jeden formularz, nie ma go nawet jako parametru, coś takiego:

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/

Twój kod próbował użyć a ckbox tablica, która nie istnieje To, co pokazałem, to jak wybrać wszystko input elementy, a następnie sprawdź, czy każdy z nich jest zaznaczony.

Nie musisz tego używać eval w ogóle, z pewnością nie używać zmiennej indeksowej w tablicy (lub obiekcie podobnym do tablicy).


0 dla odpowiedzi № 5

Zamiast tego wypróbuj ten kod.

Masz z tobą kilka problemówformularz i sposób uzyskiwania dostępu do elementów w formularzu. Sugeruję również, aby uzyskać IDE z wbudowanym debuggerem javascript. VS 2010 jest darmowy, za pomocą którego można tworzyć kod HTML lub asp.net. Jeśli chcesz, możesz trzymać się prostego kodu html. TO ZNACZY. ma wbudowany, jeśli włączysz odpowiednie opcje.

Aby użyć debuggera, możesz odkomentować linię // debugger

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