堆棧內存溢出
  簡體   English   中英

需要計算按鈕上的復選框點擊它不起作用

[英]Need to count checkboxes on a button click on it does not work

 原文  2012-04-04 21:33:26  9   5    javascript/ html/ forms/ function/ checkbox

問題描述

下面的表單有 11 個復選框。我將腳本設置為在單擊按鈕時執行 function，該按鈕會顯示一個彈出窗口，告知選中了多少個復選框。但是，當我單擊按鈕時，沒有任何反應。 我認為我的錯誤可能出在 function 代碼中，以及辨別名稱與 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>

5 個解決方案

解決方案1
 0  2012-04-04 21:37:24

您的 function 電話有問題。 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++;
            }
        }

解決方案2
 0  2012-04-04 21:41:32

這適用於較新的瀏覽器（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/

解決方案3
 0  2012-04-04 21:42:27

有幾個問題：

您需要將字符串或元素傳入 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;
    }
}

解決方案4
 0  2012-04-04 21:48:51

正如其他答案所說， anyCheck()中的參數需要是對表單的引用。 我會將 id 作為字符串傳入，並在 function 中使用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數組。 我展示的是如何 select 所有input元素，然后測試每個元素是否為已選中的復選框。

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

解決方案5
 0  2012-04-04 21:52:54

請嘗試使用此代碼。

您在傳遞表單以及如何訪問表單中的元素時遇到了一些問題。 我還強烈建議您使用內置 javascript 調試器的 IDE。VS 2010 是免費的，您可以使用它來開發 html 或 asp.net 代碼。 如果願意，您可以直接使用 html 代碼。 如果您打開正確的選項，IE 有一個內置的。

要使用調試器，您可以取消注釋 //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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AJAX-單擊按鈕不起作用 倒計時它不適用於單擊按鈕 jQuery-按鈕單擊不起作用 jQuery按鈕單擊不起作用 單擊按鈕顯示復選框 如何在單擊按鈕時取消選中復選框？ Card 組件的按鈕單擊在 Vuetify 中不起作用 單擊按鈕時的調用功能不起作用 DevExpress按鈕單擊功能不起作用 按鈕單擊在Celltemplate角網格中不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM