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

您在第三个type="text/javascript"标记上忘记了<script>。可以成为它的一部分......

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 个答案: