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（＆＃34;测验＆＃34;），但同样的事情正在发生。

Answer 1

将i<=inputElems.length更改为i < inputElems.length。数组索引从0运行到length-1。当i为inputElements.length时（当您的脚本无法正常工作，Javascript控制台不是您寻求帮助的第一个位置？）时，您就会收到错误。 / p>

样本enter link description here

Answer 2

您需要做的就是从代码中的＆lt; = 中删除 = 符号。

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

<强> See the DEMO here

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 个答案: