Jquery-Code funktioniert nicht ohne Warnung

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

Ich verwende diesen Code, um die Anzahl der Checkbox-Eingaben zu zählen, die überprüft werden.

Mit alert() funktioniert das gut. Aber ohne die Warnung funktioniert das nicht. Wie kann ich es reparieren?

Answer 1

nur eine Zeile Code ist für Ihr Ergebnis genug: -

$("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>

Hinweis: - Code beginnt mit der Verarbeitung ohne das Dokument zu warten, um es richtig zu laden, so dass im Grunde braucht gescheitert sein, aber wenn alert() kommt, dann wartet es darauf, dass das Dokument korrekt gerendert wird, und dann gibt der Code das Ergebnis aus.

Setzen Sie den gesamten Code in $(document).ready(function(){ und Sie sind gut zu gehen (dann können Sie alert() auch entfernen).

Aber mehr einfachste Lösung durch me.Thanks gegeben

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

Arbeiten jsfiddle.

Sie verwenden möglicherweise Dokument bereit über Js Code, entfernte ich diesen Code.

Probieren Sie es aus, es sollte funktionieren.

Answer 3

Mit alert() diese Arbeit ohne Alarm well.But() ist dies nicht working.How kann ich fix it

Die Code wartet nicht, bis das DOM bereit ist. alert() ist ein blockierendes Ereignis, nach dem das DOM normalerweise geladen wird. Ein Weg, um die gewünschte Funktionalität ohne die Warnung zu erreichen, besteht darin, das Ereignis DOMContentLoaded auf dem DOM mit .ready() (d. H. $(document).ready()) zu beobachten.

$(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

Ihr Code mit document.ready Jquery Funktion eingeschlossen werden muss

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