如何通过计算表单中选中的复选框的数量来填充HTML文本框

How do I populate an HTML text box by counting the number of checked checkboxes in a form?

本文关键字：填充 HTML 文本 复选框 计算 何通过 表单      更新时间：2023-09-26

我有一个简单的HTML form，大约有10个checkboxes和一个文本字段在它们的右边。我要做的是计算checked的checkboxe s的数量，并在选中它们后立即在右侧的文本字段中显示此数字。我的form看起来像这样:

<form id="myForm">
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input type="checkbox" value="box" name="checkbox"/>
  <input id="totalbox" type="text" value="" />
</form>

我已经环顾四周的堆栈，但还没有能够找到我正在寻找的答案

谢谢

在jQuery中获取计数:

$('#totalbox').val($('#myForm input[type=checkbox]:checked').length);

在纯JavaScript中获取计数:

var myForm = document.getElementById('myForm');
var inputs = myForm.getElementsByTagName('input');
var count = 0;
for(var i=0; i<inputs.length; i++) {
    if (inputs[i].getAttribute('type')=='checkbox' && inputs[i].checked) count++;    
}
document.getElementById('totalbox').value = count;

你可以这样做

 $(":checkbox").change(function(){
  /* $(":checkbox:checked") will select all checkboxes in entire document, if you want for your form only then you can use my $("#myForm:checkbox:checked")  */
  $('#totalbox').val($(":checkbox:checked").length);
 });

下面是一些非jquery的逻辑:

<form id="myForm">
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input type="checkbox" value="box" name="checkbox" onchange="countChecks();"/>
    <input id="totalbox" type="text" value="" />
</form>
<script>
function countChecks() {
    var chks = document.getElementsByTagName('input');
    var total = 0;
    for (var i = 0, l = chks.length; i < l; i++) {
        if (chks[i].type == 'checkbox') {
            if (chks[i].checked) {
                total++;
            };
        }
    }
    document.getElementById("totalbox").value = total;
}
</script>
好运

既然大多数回复都是jquery，即使没有jquery标签，其余的都很长，这里有一个小的js版本:

var checkboxes= document.querySelectorAll('input[type="checkbox"]');
for(var i=0;i<checkboxes.length;i++){
  checkboxes[i].addEventListener('change', checked)
}
function checked(){
   var checkboxes= document.querySelectorAll('input[type="checkbox"]:checked');
   document.getElementById('totalbox').value= checkboxes.length;
}

JSFiddle

您可以使用jQuery实现类似的功能。

$(function($){
    $('#myForm input:checkbox').click( function(){
       $('#totalbox').val( $('#myForm :checkbox:checked').length );
    });
});
相关文章：