views:

258

answers:

3

the sum part works if you click each box individually but not when you click select all (although select all does check all the boxes)

any thoughts?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<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>
A: 

You forgot type="text/javascript" on your third <script> tag. That could be part of it...

brianreavis
+1  A: 

Try this, it can actually fit into one line:

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

If that does not trigger the recalculation, maybe try triggering the click event on the chkOptions:

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

The sum is not calculated anywhere in the "select all" callback... the ugly way would be to just copy-paste it from the other function like this:

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

  });       
});

...a bit prettier way would be to separate the calculation of the sum to it's own function and call it from the both callbacks. In the process you could combine the two script tags and the two $(document).ready callbacks:

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


});
kkyy
this worked for me. thanks kkyy
If it worked, would you please accept the answer?
kkyy