编写jQuery代码以检查是否选中了复选框，并指出选中的复选框数量？

Question

  $(document).ready(function(){ var numberOfChecked = $('input:checkbox:checked').length; //alert(numberOfChecked); // document.write(numberOfChecked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox"/><lable>Red</lable></td> <td><input type="checkbox"/><lable>Green</lable></td> <td><input type="checkbox"/><lable>Blue</lable></td> <td><input type="checkbox"/><lable>Black</lable></td> </tr> </table> <p id="dem"></p> 

This is actually an assignment oi was stuck with the dynamically changing number as im new to jquery.

Answer 1

Your problem was that you were updating the count as soon as the page loads (which happens before you get a chance to check any boxes and then doesn't happen when you do check a box), not after each checkbox gets clicked.

You asked for a JQuery solution to this problem, but understand that JQuery is just JavaScript that someone else wrote. For a trivial issue like this, adding the JQuery library really adds no value - - the problem is easily solved with straight JavaScript. JQuery is recklessly overused today. When it came out, it was much simpler than doing things without it, but that was quite a while ago and today, we can do much of the basics of JQuery just as simply without it.

 // Get all the checkboxes into an array var boxes = Array.prototype.slice.call(document.querySelectorAll("input[type=checkbox]")); // Get reference to output span var output = document.getElementById("output"); // Loop through all the checkboxes boxes.forEach(function(box){ // Set up click event handlers on each box.addEventListener("change", function(){ // Update the output area with the number of checked checkboxes output.textContent = document.querySelectorAll("input[type=checkbox]:checked").length; }); }); 

 <input type="checkbox"> Box 1 <input type="checkbox"> Box 2 <input type="checkbox"> Box 3 <input type="checkbox"> Box 4 <div>Number checked: <span id="output"></span></div> 

If you feel you really want a JQuery solution, here's what that would look like:

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox"/><lable>Red</lable></td> <td><input type="checkbox"/><lable>Green</lable></td> <td><input type="checkbox"/><lable>Blue</lable></td> <td><input type="checkbox"/><lable>Black</lable></td> </tr> </table> <p id="dem"></p> 

Answer 2

$(":checkbox :checked") 

this gets the checked checkboxes in an array if you need the length of checked you can do $(":checkbox :checked").length

if you just do $(":checked") you get selections as well for drop down lists etc.

so you seem to have the checkbox part; what needs to be done is you need to trigger an action; where you threw the code in the javascript file runs only once. triggers are called when an event happens. http://api.jquery.com/trigger/

since we are going by when something is checked (unless you want to tie this to a button ofc) you would want to call it on a change

$(".checkbox").change(function() {
   $("#areaforInput").append($(":checkbox:checked").length)
});

with the areaForInput being the id for the object you want to append with the count for checked etc

Answer 3

<input type="checkbox"> Box 1
<input type="checkbox"> Box 2
<input type="checkbox"> Box 3
<input type="checkbox"> Box 4
<div>Number checked: <span id="output"></span></div>

JS:

$(document).ready(function(){
  $("input[type=checkbox]").change(function(){
      $("#output").text($("input[type=checkbox]:checked").length);
   });
});

fiddle updated https://fiddle.jshell.net/riazxrazor/koo23g47/3/

Answer 4

Js

<script>
$(function () {
    $(".chkBox").click(function () {
        $("#output").html($(".chkBox:checked").length)
    });
});
</script>

Html

<input class="chkBox" type="checkbox" />Red
<input class="chkBox" type="checkbox" />Green
<input class="chkBox" type="checkbox" />Blue
<input class="chkBox" type="checkbox" />Black
<div>Number checked: <span id="output"></span></div>