JS jquery实时输入计算 联动计算后输出
使用JQUERY监听INPUT输入框的变化,然后取出数值进行计算后赋值到另外一个输入框中,从而实现一个框中输入数字另外一个框进行联动计算显示
方法如下:
JS部分
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#amount').bind('input propertychange', function() { var type = $('#type').val(); if(type=="1"){ var tax={$tax}+1; }else{ var tax=1; } var a = $('#amount').val(); var sum= a * tax; $('#result').val(sum.toFixed(2)); }); }) </script>
HTML部分
<div class="xdy_addbbcs_div_6"> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">转账类型</div> <div class="xdy_addbbcs_div_nr3" > <select name="skxx_khh" id="type" class="mrkk" onChange="move()"> <option value="1" selected="selected" >现金</option> <option value="2" >支票</option> </select> </div> <div class="xdy_addbbcs_div_nr4"></div> </div> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">费率</div> <div class="xdy_addbbcs_div_nr3" > <select id="s2"> <option value="0.1" selected="selected" >10%</option> </select> </div> </div> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">收款地址</div> <div class="xdy_addbbcs_div_nr3" > <input type="text" value="" id="address" /> </div> </div> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">转账金额</div> <div class="xdy_addbbcs_div_nr3"> <input type="text" value="" id="amount" onkeyup="cal()" /> </div> </div> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">账户扣款</div> <div class="xdy_addbbcs_div_nr3"> <input type="text" value="" id="result" AUTOCOMPLETE="off" /> </div> </div> <div class="xdy_addbbcs_div_nr1"> <div class="xdy_addbbcs_div_nr2" style="width:8rem;">交易密码</div> <div class="xdy_addbbcs_div_nr3"> <input type="password" id="pass" /> </div> </div> <div class="blank" style="height:1.5rem;"></div> <div class="xdy_hydl_srk_2"> <span style=" color:#6d7671;" class="long_button loglin_button" >提交转账</span> </div> <div class="blank" style="height:1rem;"></div> </div> </div>
顶(0)
踩(0)
- 最新评论