jQuery货币转换复选框点击使用谷歌财务api

I want my amount field to get updated with the converted value of the total amount (with amount I mean the sum of amount received from all checkboxes checked). For example, I have the following checkboxes.

<input type="checkbox" value="10">
<input type="checkbox" value="20">
<input type="checkbox" value="30">

These 10, 20 and 30 (total 60) values are in USD. I want it to be converted to INR and be displayed in a div like say <div class="convertedAmount">Rs.0.00</div>. For conversion I am using Google Finance API here as shown below.

<?php
$from_Currency = "USD";
$to_Currency = "INR";
$encode_amount = 1;
$get = file_get_contents("https://www.google.com/finance/converter?a=$encode_amount&from=$from_Currency&to=$to_Currency");
$get = explode("<span class=bld>",$get);
$get = explode("</span>",$get[1]);
$converted_currency = preg_replace("/[^0-9\.]/", null, $get[0]);
echo $converted_currency;
?>

Now the problem is that I want the div value to be updated each time when checkboxes are checked or unchecked using jquery. But I have weak hands on jQuery so I am having trouble. I would be grateful if helped. Please help me.

I figured out the solution after sometime I posted the question. Here, I simply stored the converted value in a variable inr and multiplied it with the total summed value received from each checkbox and displayed the total in INR. Now each time a checkbox is checked or unchecked it updates the values respectively.

Enjoy the solution code below. Its fast too :D

$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    var total = 0; var inr = '<?php echo $converted_currency; ?>';
    $('input:checkbox:checked').each(function(){
      total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
    });
    $("#costdisplay").html(total);
    $("#inrdisplay").html(total*inr);
    $("input[name=ap_amount]").val(total);
    $("input[name=payment]").val(total);
    $("input[name=amount]").val(total*inr);
  });
});

You need ajax for this. It took me a while but here is your solution. Try to understand it and ask if you have any questions. I have not done the other two checkboxes to be unchecked once you ckeck the needed one but it is not hard to figure it out. here is page which I called test100.php

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


<input type="checkbox" class="checkbox" value="10">
<input type="checkbox" class="checkbox" value="20">
<input type="checkbox" class="checkbox" value="30">


<?php
$from_Currency = "USD";
$to_Currency = "INR";
$encode_amount = 1;
$get = file_get_contents("https://www.google.com/finance/converter?a=$encode_amount&from=$from_Currency&to=$to_Currency");
$get = explode("<span class=bld>",$get);
$get = explode("</span>",$get[1]);
$converted_currency = preg_replace("/[^0-9\.]/", null, $get[0]);


echo "<div id='result'></br>$converted_currency</div>";
?>

<script type="text/javascript">
$(".checkbox").click(function() {

if($(this).is(":checked"))
{
var rez = $("#result");     
var checkbox_value = $( this ).val();

var dataString = 'checkbox_value=' + checkbox_value;

$.ajax({
type: "POST",
url: "calculation.php",
data: dataString, 
cache: false,

success: function(html)
{

 rez.empty().append(html);
 rez.fadeIn("slow")
 }
 });

 }
 });
 </script>

God I hate this moving in of every line of code on this website

Here is what is on page calculation:

<?php

if($_POST['checkbox_value'])
{
$from_Currency = "USD";
$to_Currency = "INR";
$encode_amount = $_POST['checkbox_value'];
$get = file_get_contents("https://www.google.com/finance/converter?a=$encode_amount&from=$from_Currency&to=$to_Currency");
$get = explode("<span class=bld>",$get);
$get = explode("</span>",$get[1]);
$converted_currency = preg_replace("/[^0-9\.]/", null, $get[0]);
echo "<div id='result'></br>$converted_currency</div>";

}
?>

You can see it in action here: ACTION :D