首页 建站教程 WEB前端 正文

jq实现多个input累计求和并动态显示到另一输入框

需要达到的效果,当多个输入框填写数字时,自动相加,总数实时显示到另一个input中,本文主要通过jQuery方式来实现,具体实现实现代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

需要达到的效果,当多个输入框填写数字时,自动相加,总数实时显示到另一个input中,本文主要通过Jquery方式来实现,具体实现实现代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多个input累计求和并动态显示到另一输入框</title>
        <script src="https://www.umtheme.com/zb_system/script/jQuery-2.2.4.min.js" type="text/javascript"></script>
        <script>
        $(function () {
         $('.inputBox .input').bind('input propertychange', function(){
               var total = 0;
               $(".input").each(function(){
                   total+=(parseFloat($(this).val())?parseFloat($(this).val()):0);
               });
               /*total=total.toFixed(1);保留小数点后一位,如果有小数点的情况,可以通过它控制小数点位数*/
               $("#total").val(total);
           });
            });
        </script>
    </head>
    <body>
        <div class="inputBox">
            <input type="text" class="input">
            <input type="text" class="input">
            <input type="text" class="input">
            <input type="text" class="input">
            <input type="text" class="input">
            <input type="text" id="total" disabled>
        </div>
    </body>
</html>
打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/200.html

相关推荐

js判断两个input输入框必须任填一个

在表单提交中,有时需要判断两种类型必填其一,如何判断两个input只能填写一个,如果填两个或两个都不填都出现alert验证提示。实现代码如下:<!DOCTYPE html>&...
WEB前端 2021.11.08 0 582
纯css实现列表自动添加序号

纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:如果用li元素配合list-s...
WEB前端 2021.07.18 0 1646
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持