jQueryでonclickが期待どおりに機能していない

Question

ここにサンプルコードがあります。スクリプトをコメントアウトすると、ボタンクリック時にサーバー側の関数が呼び出されます。次のコードのエラーはどうなりますか？

<form id="form1" runat="server">  
    <input type="checkbox" id="chb1" value="Hourly" /> 
    <input type="checkbox" id="chb2" value="Daily" /> 
    <input type="checkbox" id="chb3" value="Weekly" /> 
    <input type="checkbox" id="chb4" value="Monthly" /> 
    <input type="checkbox" id="chb5" value="Yearly" /> 

    <asp:Button Text="submit" runat="server" ID="btnSubmit" OnClick="btnSubmit_Click"/> 
</form> 
<div></div> 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 

     var selectedcout = 0; 

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

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

</script> 

Answer 1

あなたが提出されてからフォームを停止することができるように、フォームではなく、送信ボタンのclickのsubmitイベントにフックする必要があります。これを試してみてください：

var selectedcout = 0; 

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

countChecked(); 

$('#form1').on('submit', function(e) { 
    e.preventDefault(); // stop the form submitting 
    countChecked(); 
});