CODEWITHSUNDEEP
javascriptjquery
Rob
Rob

Reputation: 37

Count Checked Check with JQuery

I am looking for some advice, so I have some checkboxes. I would like to Add a dynamic count so that it shows the number that was selected.

So far I have 

$('.individual').length

Which returns the number but how would I add it to my span:

<li><p class="records-selected"><span id="count-checked-checkboxes">0</span> of 29 records selected</p></li>
<li><a href="#" class="number-records">Select All 29 Records</a></li>

This is what is on my Table Data

<td><label><input type="checkbox" class="individual" /></label></td>

I forgot to mention that on my application, the table is loaded with Ajax, would I just need to add it to my AJAX callback?

Upvotes: 0

Views: 116

Answers (3)

yajiv
yajiv

Reputation: 2941

Try this code. I used text() of jQuery to add text.

$(".1").on("change", check);

function check(){
  if($(".1:checked").length>0){
    $('p').show();   //instead of $('p') select whatever you want show(selector for that text)
    $("#selected").text($(".1:checked").length);
    $("#total").text($(".1").length);
  }
  else{
    $('p').hide();  //instead of $('p') select whatever you want hide(selector for that text)
  }
}
check();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="1">1
<input type="checkbox" class="1">2
<input type="checkbox" class="1">3
<input type="checkbox" class="1">4
<input type="checkbox" class="1">5

<p><span id="selected"></span> of <span id="total"></span> checkbox selected</p>

Upvotes: 1

Ciprianis
Ciprianis

Reputation: 255

This should do it:

$('#count-checked-checkboxes').text($('.individual:checked').length)

Upvotes: 0

Ryan Wilson
Ryan Wilson

Reputation: 10765

Use JQuery .text() and pass the length to it like so:

$('#count-checked-checkboxes').text($('.individual').length);

Upvotes: 0

Related Questions