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

Question

我有一个简单的HTML form其中包含大约10个checkboxes并在它们右侧有一个文本字段。 我想要做的是张数checkboxe这为S checked ，并尽快显示在文本字段这个号码的权利，因为他们进行检查。 我的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>

我在Stack上四处张望，但找不到所需的答案

谢谢

Answer 1

要获得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;

Answer 2

你可以这样

 $(":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);

 });

Answer 3

这是一些非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>

祝好运

Answer 4

好吧，尽管没有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

Answer 5

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

$(function($){
    $('#myForm input:checkbox').click( function(){
       $('#totalbox').val( $('#myForm :checkbox:checked').length );
    });
});