アラートなしでJqueryコードが機能しない

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

このコードを使用して、チェックされたチェックボックス入力の数をカウントします。

alert()でこれはうまくいきます。しかし、警告なしでは、これは動作していません。どうすれば修正できますか？

Answer 1

つだけ行のコードは、あなたの結果のために十分である： -

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

注： - あなたのコードが正しくので、基本的にはそれが必要ロードするために文書を待たずに処理を開始しますが失敗しますが、alert()が来たら、ドキュメントが正しくレンダリングされるのを待ってから、結果を出力します。

$(document).ready(function(){の中にコード全体を入れて、あなたはいいです（alert()も削除できます）。警告なし

しかし、より多くの最も簡単な解決策は、アラートで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コード：

jsfiddle作業

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

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

。

jsコードの準備が整っている文書を使用している可能性がありますので、そのコードを削除しました。

試してみてください。

Answer 3

（で与えられる）。この作品well.But（）私はそれ

修正することができますworking.HowこれではありませんDOMは準備が整うまで、コードは待機しません。 alert()はブロッキングイベントです。その後、通常はDOMがロードされます。アラートなしに目的の機能を実現する1つの方法は、DOMのDOMContentLoadedイベントを.ready()（つまり$(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

コードがdocument.ready jQueryの機能

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

で囲まれる必要があります