如何獲取JavaScript中CheckBox的數量？

Question

我正在編寫此代碼，但無法獲取任何內容。 任何幫助表示贊賞。

<!DOCTYPE HTML>
   <html>
     <head>
       <script>
         function computeMarks() {
           var inputElems = document.form1.getElementsByTagName("input");
           var count = 0;
           for (var i =0; i<=inputElems.length; i++) {
             if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
               count++;
             }
           }
           alert(count);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

我試圖做getElementByName（“ quiz”），但是同一件事正在發生。

Answer 1

將i<=inputElems.length更改為i < inputElems.length 。 數組索引從0到length-1 。 當i為inputElements.length時，您會收到一個錯誤inputElements.length （當您的腳本不起作用時，不是Java控制台是您尋求幫助的第一位嗎？）。

演示在這里輸入鏈接描述

Answer 2

好了，您需要做的就是從代碼中的<=刪除=符號。

<!DOCTYPE HTML>
<html>
     <head>
       <script>
         function computeMarks() {
           var inputElems = document.form1.getElementsByTagName("input");
           var count = 0;
           for (var i =0; i<inputElems.length; i++) {
             if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
               count++;
             }
           }
           alert(count);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

Answer 3

我建議JQuery做到這一點，這很容易。 這是一個示例，如果您在代碼中使用JQuery而不是普通的javascript：

<!DOCTYPE HTML>
   <html>
     <head>
       <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <script>
         function computeMarks() {

           var counter = 0;
           $('input[type="checkbox"]').each(function(){
                if($(this).prop('checked'))
                {
                    counter++;
                }
           });

           alert(counter);
         }
       </script>
     </head>
     <body>
       <form name="form1" id="form1">
         <input type="checkbox" name="quiz" value=1 /> Hi
         <input type="checkbox" name="quiz" value=1 /> Bye
         <input type="checkbox" name="quiz" value=1 /> See ya
         <input type="button" onClick="computeMarks()" value="Compute Marks"/>
       </form>
     </body>
   </html>

Answer 4

您可以獲取表單的引用並遍歷其元素以查看是否檢查了它們，只需用此元素替換函數，它便可以工作：

function computeMarks() {
    var checked = 0;
    var form = document.getElementById("form1");
           var index, element;
    for (index = 0; index < form.elements.length; ++index) {
        element = form.elements[index];
        // You may want to check `element.name` here as well
        if (element.type.toUpperCase() == "CHECKBOX" && element.checked) 
            ++checked;

    }
    alert(checked);
}

在這里查看演示

Answer 5

我建議您查詢元素，並在JavaScript中添加事件，例如：

var form = document.form1
var button = form.querySelector('[type="button"]')
var checkboxes = form.querySelectorAll('[type="checkbox"]')

var computeMarks = function(els) {
  return []
    .map.call(els, function(x){return +x.checked})
    .reduce(function(x, y){return x + y})
}

button.addEventListener('click', function() {
  alert(computeMarks(checkboxes))
})

演示： http ： //jsfiddle.net/u59c3d1L/2/

如何獲取JavaScript中CheckBox的數量？

問題描述

5 個解決方案

解決方案1
2 已采納 2014-09-09 05:40:00

解決方案2
1 2014-09-09 05:39:23

解決方案3
0 2014-09-09 05:37:55

解決方案4
0 2014-09-09 05:42:53

解決方案5
0 2014-09-09 05:44:41

如何獲取JavaScript中CheckBox的數量？

問題描述

5 個解決方案

解決方案1 2 已采納 2014-09-09 05:40:00

解決方案2 1 2014-09-09 05:39:23

解決方案3 0 2014-09-09 05:37:55

解決方案4 0 2014-09-09 05:42:53

解決方案5 0 2014-09-09 05:44:41

解決方案1
2 已采納 2014-09-09 05:40:00

解決方案2
1 2014-09-09 05:39:23

解決方案3
0 2014-09-09 05:37:55

解決方案4
0 2014-09-09 05:42:53

解決方案5
0 2014-09-09 05:44:41