jQuery總和檢查+全選

Question

如果您單獨單擊每個框，則總和部分有效，但單擊“全選”時則無效（盡管“全選”會選中所有框）

有什么想法嗎？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<title>jQuery Example</title> 

<script src="../js/jquery.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript"> 
$(document).ready( function() {
    $(".chkOptions").click(
        function () {
            var ntot = 0;
            $(".chkOptions:checked").each(function () {
                ntot += parseInt($(this).val());
            });
            $("#PaymentTotal").val(ntot);
        })
        .change();
});
</script> 

<SCRIPT LANGUAGE="JavaScript">
        $(document).ready(function()
        {
            $("#paradigm_all").click(function()             
            {
                var checked_status = this.checked;
                $("input[name=paradigm]").each(function()
                {
                    this.checked = checked_status;
                });
            });                 
        });
</script>
</head> 
<body> 
                <h2>How much do you want to save?</h2> 


                <form id="myTable" name="test" method="post" action=""> 
                    Check this for 10% savings
                    <input name="paradigm" class="chkOptions" type="checkbox" value="10" checked /> 
                    <br /> 
                    Check this for 15% savings
                    <input name="paradigm" class="chkOptions" type="checkbox" value="15" /> 
                    <br /> 
                    Check this for 20% savings
                    <input name="paradigm" class="chkOptions" type="checkbox" value="20" /> 
                    <br /> 
                    Check this for 25% savings
                    <input name="paradigm" class="chkOptions" type="checkbox" value="25" /> 
                    <br /> 
                    Check this for 30% savings
                    <input name="paradigm" class="chkOptions" type="checkbox" value="30" /> 
                    <br />          
                    <input type="checkbox" id="paradigm_all">Select All<br> 
                </form> 

<!-- checkall(name of form, common name of checkbox group, true or false)-->
                <p>Total Savings:
                    <input type="text" id="PaymentTotal" value="0" size="5" /> 

</body> 
</html>

Answer 1

試試這個，它實際上可以放入一行：

$(document).ready( function() {
    $('#paradigm_all').click(function() {
          $(".chkOptions").attr('checked', $('#paradigm_all').is(':checked'));   
       }
    ));
});

如果那不觸發重新計算，請嘗試觸發chkOptions上的click事件：

$(".chkOptions").attr('checked', $('#paradigm_all').is(':checked')).each(function() {
    $(this).click();
});

Answer 2

您忘記了第三個<script>標記上的type="text/javascript" 。 那可能是其中的一部分...

Answer 3

在“全選”回調中的任何地方都不會計算總和...丑陋的方法是僅從其他函數中復制粘貼，如下所示：

$(document).ready(function()
{
  $("#paradigm_all").click(function()               
  {
    var checked_status = this.checked;
    var ntot = 0;
    $("input[name=paradigm]").each(function()
    {
      if (checked_status) ntot += parseInt($(this).val());
      this.checked = checked_status;
    });
    $("#PaymentTotal").val(ntot);

  });                   
});

...更漂亮的方法是將總和的計算與其自己的函數分開，然后從兩個回調中調用它。 在此過程中，您可以結合使用兩個腳本標簽和兩個$（document）.ready回調：

function updateSum() {
  var ntot = 0;
  $("input.chkOptions:checked").each(function() {
    ntot += parseInt($(this).val());
  });
  $("#PaymentTotal").val(ntot);
}    

$(document).ready(function() {
  $(".chkOptions").click(function() {
    updateSum();
  });

  $('#paradigm_all').click(function() {
    $("input[type='checkbox']").attr('checked', $('#paradigm_all').is(':checked'));   
    updateSum();
  });


});

jQuery總和檢查+全選

問題描述

3 個解決方案

解決方案1
1 2009-09-04 05:52:00

解決方案2
0 2009-09-04 05:44:22

解決方案3
0 2009-09-04 05:55:42

jQuery總和檢查+全選

問題描述

3 個解決方案

解決方案1 1 2009-09-04 05:52:00

解決方案2 0 2009-09-04 05:44:22

解決方案3 0 2009-09-04 05:55:42

解決方案1
1 2009-09-04 05:52:00

解決方案2
0 2009-09-04 05:44:22

解決方案3
0 2009-09-04 05:55:42