如何在JavaScript中检查复选框的编号

How to get the numbers of CheckBox checked in JavaScript?

本文关键字：复选框 编号 检查 JavaScript      更新时间：2023-09-26

我正在写这段代码，但无法获得任何内容。感谢您的帮助。

<!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（"测试"），但同样的事情正在发生。

将i<=inputElems.length更改为i < inputElems.length。数组索引从0运行到length-1。当i是inputElements.length时，您会遇到一个错误（当您的脚本不起作用时，Javascript控制台不是您第一个寻求帮助的地方吗？）。

演示此处的链接描述

您需要做的就是从<。

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

我建议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>

您可以获得表单的引用，并循环遍历它的元素，看看它们是否被检查，只需用它替换您的函数，它就会工作：

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

请参阅此处的演示

我建议您查询元素，并在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/

相关文章：