CODEWITHSUNDEEP
javascripthtmlcheckbox
Spara1008
Spara1008

Reputation: 21

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

I have a simple HTML form with about 10 checkboxes and a text field to the right of them. What I want to do is count the number of checkboxes that are checked and display this number in the text field to the right as soon as they are checked. My form is looking like this:

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

I've looked around on Stack but haven't been able to find the answer I'm looking for

Thanks

Upvotes: 1

Views: 796

Answers (5)

Debreczeni Andr&#225;s
Debreczeni Andr&#225;s

Reputation: 1678

You could use jQuery to achieve something like this. 

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

Upvotes: -1

A.B
A.B

Reputation: 20445

you can do like this

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

 });

Upvotes: 1

T J
T J

Reputation: 43156

Well since most of the responses are jquery even though there's no jquery tag and rest are long ones, here's a small js version:

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

Upvotes: 0

Alexandre R. Janini
Alexandre R. Janini

Reputation: 497

Here's some non-jQuery logic:

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

Good luck

Upvotes: 0

cherouvim
cherouvim

Reputation: 31903

To get the count in jQuery:

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

To get the count in pure 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;

Upvotes: 2

Related Questions