I trying to change the span text based on my checkbox.here is my html

    <form method="get">
        <div class="kanDu">
            <p>Heading 1</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
            <input type="checkbox" />test4

        </div>
        <div class="erDutil">
            <p> Heading 2</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
        </div>
        <div class="vilDu">
            <p>Heading 3</p>
         <input type="checkbox" />test1
            <input type="checkbox" />test2 
            <input type="checkbox" />test3
            <input type="checkbox" />test4 
        </div>
        <div class="inern_btn">
<p class="score">Score:<span class="getScore"></span><span>/</span><span class="totalScore"></span></p>
            <input type="Submit" name="Submit" />
        </div>

        </form>

I need to change the span element text based on the checkbox.the span element with class totalscore have the text of total number of check box.and the getscopre span have the number of checked checkbox count.

I tried something like this

$(document).ready(function () {

    var numberOfChecked = $('input:checkbox:checked').length;
    var totalCheckboxes = $('input:checkbox').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

        }); 

the total number of checkbox count get and its working fine ,but the other one is not working.can any one suggest some help.thanks in advance.

I trying to change the span text based on my checkbox.here is my html

    <form method="get">
        <div class="kanDu">
            <p>Heading 1</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
            <input type="checkbox" />test4

        </div>
        <div class="erDutil">
            <p> Heading 2</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
        </div>
        <div class="vilDu">
            <p>Heading 3</p>
         <input type="checkbox" />test1
            <input type="checkbox" />test2 
            <input type="checkbox" />test3
            <input type="checkbox" />test4 
        </div>
        <div class="inern_btn">
<p class="score">Score:<span class="getScore"></span><span>/</span><span class="totalScore"></span></p>
            <input type="Submit" name="Submit" />
        </div>

        </form>

I need to change the span element text based on the checkbox.the span element with class totalscore have the text of total number of check box.and the getscopre span have the number of checked checkbox count.

I tried something like this

$(document).ready(function () {

    var numberOfChecked = $('input:checkbox:checked').length;
    var totalCheckboxes = $('input:checkbox').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

        }); 

the total number of checkbox count get and its working fine ,but the other one is not working.can any one suggest some help.thanks in advance.

• javascript
• jquery
• html
• checkbox

• what value do you get in numberOfChecked? – Rohan Commented Feb 20, 2014 at 6:05
• @Rohan The value getting is 0 – Arun Commented Feb 20, 2014 at 6:07
• 1 For this to work, you need to write a function which will be called on every checkbox check/uncheck which should update the numberOfChecked. – SajithNair Commented Feb 20, 2014 at 6:07

5 Answers 5

try adding thois code. It should work

    $(document).ready(function () {

        var numberOfChecked = $('input:checkbox:checked').length;
        var totalCheckboxes = $('input:checkbox').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

        $("input[type=checkbox]").change(function () {
            var numberOfChecked = $('input:checkbox:checked').length;
            $('.getScore').text(numberOfChecked);
         });
    }); 

Here is the code

 $('form').on('click', function(){
    $('.totalScore').text( $('input:checked').length )
  });

Fiddle Demo

For this to work, you need to write a function which will be called on every checkbox check/uncheck which will update the value.

Check this js fiddle http://jsfiddle/4UdYQ/

var numberOfChecked;
$(document).ready(function () {


    var totalCheckboxes = $('input:checkbox').length;
    numberOfChecked = $('input:checkbox:checked').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

}); 

$('input[type=checkbox]').change(function() {
    numberOfChecked = $('input:checkbox:checked').length;
        $('.getScore').text(numberOfChecked);
});

try this code for getting count of checked checkboxes

var numberOfChecked = $("[type='checkbox']:checked").length;

$(document).ready(function () {
    $('.totalScore').text($('input:checkbox').length);
    $('.getScore').text($('input:checkbox:checked').length)

    $(':checkbox').on('click', function() {
        $('.getScore').text($('input:checkbox:checked').length);
    });
})

DEMO