Допомога у програмуванні, відповіді на питання / Javascript / Необхідно зарахувати прапорці на клацання кнопкою миші на неї не працює - javascript, html, forms, function, checkbox

Необхідно зарахувати прапорці на клацання кнопкою миші на ньому не працює - javascript, html, forms, function, прапорець

У наступній формі є 11 прапорців .. Я налаштував сценарій, щоб виконати функцію натисканням кнопки, яка відображатиме спливаюче вікно про те, скільки флажок було перевірено. Проте, коли я натискаю кнопку, нічого не відбувається. Я думаю, що моя помилка може бути в коді функцій і усвідомлювати використання імені, і т.д. тощо ... Але я не знаю, що таке помилка.

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

Відповіді:

0 для відповіді № 1

Є кілька проблем:

Вам потрібно передати в будь-який рядок чи елемент у будь-який контроль. Я зробив би рядок.

onclick="anyCheck("form1")"

Всередині anyCheck спочатку потрібно отримати фактичний екземпляр форми у змінну, наприклад:

form = document.getElementById(form);

Потім ви можете цикл через кожен елемент у формі, використовуючи 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 для відповіді № 2

У виклику функції виникає проблема. Форма1 невизначена.

Використовуйте 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++;
}
}

0 для відповіді № 3

Це працює в новіших браузерах (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/

0 для відповіді № 4

Як кажуть інші відповіді, параметр в anyCheck() має бути посиланням на форму. Я передаю ідентифікатор як рядок і використовую 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 зовсім, звичайно, не використовувати індексну змінну в масиві (або масивовому об'єкті).

0 для відповіді № 5

Спробуйте використати цей код.

Ви зіткнулися з кількома проблемамиформа та спосіб доступу до елементів у формі. Я також дуже рекомендую вам отримати IDE з вбудованим відладчиком javascript. VS 2010 є безкоштовним, який ви можете використовувати для розробки html або asp.net коду. Ви можете дотримуватися прямого HTML-коду, якщо хочете. І.Е. має вбудований, якщо ви ввімкнете правильні параметри.

Щоб використовувати відладчик, ви можете розкоментувати лінію // 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>