Jquery code doesn't work without alert

Question

var countChecked = function () {
  var n = $("input:checked").length;
  $("#count").text(n + (n === 1 ? " is" : " are") + " checked!");
};

countChecked();
alert();        // this alert

$("input[type=checkbox]").on("click", countChecked);

I use this code to count the number of checkbox inputs that are checked.

With alert() this works well. But without the alert this is not working. How can i fix it?

Answer 1

Only one line code is enough for your outcome:-

 $( "input[type=checkbox]" ).on( "click",function(){ alert($("input[type=checkbox]:checked").length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="vehicle" value="Cycle"> I have a cycle<br> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Auto"> I have a Auto<br> <input type="checkbox" name="vehicle" value="Car"> I have a car<br> <input type="checkbox" name="vehicle" value="Bus"> I have a bus<br> <input type="checkbox" name="vehicle" value="Truck"> I have a truck<br> 

Note:- your code starts processing without waiting the document to load properly so basically it need to be failed, but when alert() comes then it waits for document to be rendered properly, and then you code outputs the result.

Put the whole code inside $(document).ready(function(){ and you are good to go (then you can remove alert() also).

But more easiest solution is given by me.Thanks

Answer 2

HTML CODE :

<input type="checkbox" name='check'>
   <input type="checkbox" name='check'>
   <input type="checkbox" name='check'>
   <input type="checkbox" name='check'>
   <span id="count"></span>

JS CODE :

var countChecked = function() {
var n = $("input:checked" ).length;
$( "#count" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
  countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );

Working jsfiddle .

you might be using document ready above js code, I removed that code.

Give a try it should work.

Answer 3

With alert() this work well.But without alert() this is not working.How can i fix it

The code doesn't wait until the DOM is ready. alert() is a blocking event, after which the DOM is usually loaded. One way to achieve the desired functionality without the alert is by observing the DOMContentLoaded event on the DOM with .ready() (ie $(document).ready() ).

 $(document).ready(function() { var countChecked = function() { var n = $("input:checked").length; $("#count").text(n + (n === 1 ? " is" : " are") + " checked!"); }; countChecked(); $("input[type=checkbox]").on("click", countChecked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Count:<span id="count"></span></div> <div><input type="checkbox" value="1" id="one"><label for="one">1</label></div> <div><input type="checkbox" value="2" id="two"><label for="one">2</label></div> 

Answer 4

Your code needs to be enclosed with document.ready Jquery function

$(document).ready(function(){
  var countChecked = function () {
    var n = $("input:checked").length;
    $("#count").text(n + (n === 1 ? " is" : " are") + " checked!");
  };

 countChecked();
 alert();        // this alert

 $("input[type=checkbox]").on("click", countChecked);
})