多支付方式选择

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Jokeny_gyh/article/details/84532403

由于业务需要，原单一支付方式现存在多种支付方式的可能性，故在原有基础上进行扩充，可自由增减付款方式（最少一种，最多三种），如下图：

html代码部分：

<table>
  <tr>
    <th style="width: 100px;">售价：</th>
    <td><input type="text" value="3000.00" id="txtAmount"/></td>                
  </tr>
  <tr>
    <th style="width: 100px;">付款方式：</th>
    <td>
      <div id="divPayType" class="divPayType">
        <select name="ddlPayType" id="ddlPayType" >
	      <option value="32">现金</option>
	      <option value="31">银行卡</option>
	      <option value="22">微信</option>
	      <option value="21">支付宝</option>
        </select>
        <input type="text" id="txtPayAmount" class="inputPay" onfocus="Calculate(this)" onchange="CalculateChange(this)" onkeyup="onlyNumber(this)" onblur="onlyNumber(this)"/>
        <input type="button" id="btnAdd" value="+" class="btnAddReduce" onclick="Add()"/>
        <input type="button" id="btnReduce" value="-" class="btnAddReduce" onclick="Reduce()"/>
      </div>
      <div id="divPayTypelist">

      </div>
    </td>                
  </tr>
  <tr>
    <td colspan="2" style="text-align: center">
      <input type="submit" value="确认" onclick="return checkForm();" id="btnSubmit" class="btn">
      <input type="submit" value="取消" id="btnCancel" class="btn">
    </td>
  </tr>
</table>

Js代码部分：

$(function() {
  $("#txtAmount").change(function () {
    $("#txtPayAmount").val($(this).val());//默认第一个付款方式

    if ($("#divPayTypelist .divPayType").length > 0) {
      $("#divPayTypelist .divPayType").each(function() {
        $(this).val('');  //清空已添加的新付款方式
      });
    }
  });
});

//新增支付方式
function Add() {
  if ($("#divPayTypelist .divPayType").length >= 2) {
    alert('最多支持三种支付方式！');
    return;
  }

  var html = '<div class="divPayType"><select name="selectPay" class="selectPay">' +     $("#ddlPayType").html() + '</select><input type="text" class="inputPay" onfocus="Calculate(this)" onchange="CalculateChange(this)" onkeyup="onlyNumber(this)" onblur="onlyNumber(this)"/></div>';
  $("#divPayTypelist").append($(html));
}

//减少支付方式
function Reduce() {
  if ($("#divPayTypelist .divPayType").length == 0) {
      return;
  }
  var pay = $("#divPayTypelist .divPayType:eq(" + ($("#divPayTypelist .divPayType").length - 1) + ")").find('.inputPay').val(); //获取最后一种付款方式中文本框的金额

  if (pay != '') {
    var sAmount = parseFloat($("#txtPayAmount").val()) + parseFloat(pay);
    if (sAmount > parseFloat($("#txtAmount").val())) {
      $("#txtPayAmount").val($("#txtAmount").val());
    } else {
      $("#txtPayAmount").val(sAmount); //回填默认第一种付款方式中文本框的金额
    }
  }
  $("#divPayTypelist .divPayType:eq(" + ($("#divPayTypelist .divPayType").length - 1) + ")").remove(); //删除最后一张付款方式
}

//文本框获得焦点时，重新计算金额
function Calculate(obj) {
  var sum = 0;
  $(".inputPay").not(obj).each(function() {
    if ($(this).val() != '') {
      sum += parseFloat($(this).val());
    }
  });
  $(obj).val((parseFloat($("#txtAmount").val()) - sum).toFixed(2));
}

//文本框的值改变时，重新计算金额
function CalculateChange(obj) {
  var sum = 0;
  $(".inputPay").each(function () {
    if ($(this).val() != '') {
      sum += parseFloat($(this).val());
    }
  });
  if (sum > parseFloat($("#txtAmount").val())) {
    Calculate(obj);
  }
}

//文本框只能输入数字和浮点数
function onlyNumber(obj) {
  //得到第一个字符是否为负号
  var t = obj.value.charAt(0);
  //先把非数字的都替换掉，除了数字和. 
  obj.value = obj.value.replace(/[^\d\.]/g, '');
  //必须保证第一个为数字而不是. 
  obj.value = obj.value.replace(/^\./g, '');
  //保证只有出现一个.而没有多个. 
  obj.value = obj.value.replace(/\.{2,}/g, '.');
  //保证.只出现一次，而不能出现两次以上 
  obj.value = obj.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
  //如果第一位是负号，则允许添加
  if (t == '-') {
    obj.value = obj.value.replace('-', '');//'-' + obj.value;
  }
}

//提交
function checkForm() {
  var str = '';
  var sum = parseFloat("0");
  $(".divPayType").each(function () {
    if (str != '') {
      str += ';';
    }
    str += $(this).find("select").val() + '|' + $(this).find("input").val();
    sum += parseFloat($(this).find("input").val() == '' ? "0" : $(this).find("input").val());
  });
  if (sum != parseFloat($("#txtAmount").val())) {
    alert('付款总金额与售价不相等！');
    return false;
  }
  return true;
}