1

次のフォームには 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>
4

5 に答える 5

0

関数呼び出しに問題があります。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-04T21:37:24.703 に答える
0

これは新しいブラウザ (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.");
 }

デモ: http://jsfiddle.net/6pNjf/1/

于 2012-04-04T21:41:32.203 に答える
0

いくつかの問題があります。

文字列または要素のいずれかを anyCheck に渡す必要があります。私は文字列を行います。

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;
    }
}
于 2012-04-04T21:42:27.617 に答える
0

他の回答が言ったように、パラメーターanyCheck()はフォームへの参照である必要があります。ID を文字列として渡しdocument.getElementById()、関数内で使用します。または、フォームが 1 つしかない場合は、次のようにパラメーターとしても使用しないでください。

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-04T21:48:51.557 に答える
0

代わりにこのコードを試してください。

フォームを渡していて、フォーム内の要素にアクセスする方法にいくつか問題がありました。また、javascript デバッガーが組み込まれた IDE を入手することを強くお勧めします。VS 2010 は無料で、html または asp.net コードの開発に使用できます。必要に応じて、ストレートな html コードを使用できます。適切なオプションをオンにすると、IE には 1 つが組み込まれています。

デバッガーを使用するには、 //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>
于 2012-04-04T21:52:54.750 に答える