jquery实现金额累加效果

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".jin_e1,.jin_e2").keyup(function () {
            var sum = parseFloat($(".jin_e1").val()) + parseFloat($(".jin_e2").val());
            $(".zongjine").val(sum);
        });
    });
</script></head><body>
<p>主要问题是：  当我在其中（jin_e1或者jin_e2）的任意 一个input框 输入数字的时候 在总金额那里显示出来 然后当jin_e1和jin_e2的input的框都有数字的时候 进行一个累加计算 赋值给总金额 </p><!--以下是金额1 和2-->jin_e1<input type="text" class="jin_e1" value="">+
jin_e2<input type="text" class="jin_e2" value="">=<!--总金额-->
<input type="text" class="zongjine" disabled="disabled" value="">
</body>
</html>

解决方案 »

  1.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ });
    function add(obj){
    var thisVal = parseFloat($(obj).val());
    if(isNaN(thisVal)){
    alert('请输入正确的数字');
    return false;
    }
    var otherObj = $(obj).siblings("[class^='jin_']");
    var otherVal = isNaN(parseFloat($(otherObj).val())) ? 0 : parseFloat($(otherObj).val());
    console.log(thisVal,otherVal);
    $("#count").val(thisVal+otherVal);
    }
    </script></head><body>
    <p>主要问题是：  当我在其中（jin_e1或者jin_e2）的任意 一个input框 输入数字的时候 在总金额那里显示出来 然后当jin_e1和jin_e2的input的框都有数字的时候 进行一个累加计算 赋值给总金额 </p><!--以下是金额1 和2-->jin_e1<input type="text" class="jin_e1" value="" onkeyup="add(this);">+
    jin_e2<input type="text" class="jin_e2" value="" onkeyup="add(this);">=<!--总金额-->
    <input type="text" class="zongjine" disabled="disabled" value="" id="count">
    </body>
    </html>
      

  2.   

    http://ajax.googleapic.com/ajax/libs/jquery/1.7.2/jquery.min.js你引用的这个库,文件不存在
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.jin_e1,.jin_e2').keyup(function(){
         var e1 = $('.jin_e1').val() || 0,
             e2 = $('.jin_e2').val() || 0;
         if(isNaN(e1)){e1=0;$('.jin_e1').val(0);}
         if(isNaN(e2)){e2=0;$('.jin_e2').val(0);}
         $('.zongjine').val(parseFloat(e1)+parseFloat(e2));
        })
    })
    </script></head><body>
    <p>主要问题是：  当我在其中（jin_e1或者jin_e2）的任意 一个input框 输入数字的时候 在总金额那里显示出来 然后当jin_e1和jin_e2的input的框都有数字的时候 进行一个累加计算 赋值给总金额 </p><!--以下是金额1 和2-->jin_e1<input type="text" class="jin_e1" value="">+
    jin_e2<input type="text" class="jin_e2" value="">=<!--总金额-->
    <input type="text" class="zongjine" disabled="disabled" value="">
    </body>
    </html>
      

  3.   

    这个做的好 你好，我还想在问下 那还可不可以 就是当2个input框都输入数字以后  其中一个框把数字给删掉后后面总额跟着变化  当最后2个input框都用键盘的 Backspace键 删除的时候 能不能不让总额为0  为空行吗？
      

  4.   

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){ });
    function add(obj){
    var thisVal = isNaN(parseFloat($(obj).val())) ? 0 : parseFloat($(obj).val());
    var otherObj = $(obj).siblings("[class^='jin_']");
    var otherVal = isNaN(parseFloat($(otherObj).val())) ? 0 : parseFloat($(otherObj).val()); if(otherVal == 0 && thisVal == 0){
    $("#count").val('');
    }else{
    $("#count").val(thisVal+otherVal);
    }
    }
    </script></head><body>
    <p>主要问题是：  当我在其中（jin_e1或者jin_e2）的任意 一个input框 输入数字的时候 在总金额那里显示出来 然后当jin_e1和jin_e2的input的框都有数字的时候 进行一个累加计算 赋值给总金额 </p><!--以下是金额1 和2-->jin_e1<input type="text" class="jin_e1" value="" onkeyup="add(this);">+
    jin_e2<input type="text" class="jin_e2" value="" onkeyup="add(this);">=<!--总金额-->
    <input type="text" class="zongjine" disabled="disabled" value="" id="count">
    </body>
    </html>