CODEWITHSUNDEEP
javascriptphpjquery
RUC...
RUC...

Reputation: 133

Jquery code doesn't work without alert

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?

Upvotes: 4

Views: 616

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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

Upvotes: 3

Pramod Patil
Pramod Patil

Reputation: 2763

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);
})

Upvotes: 0

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

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() (i.e. $(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>

Upvotes: 0

Related Questions