多支付方式选择
程序员文章站
2022-03-07 08:31:05
...
由于业务需要,原单一支付方式现存在多种支付方式的可能性,故在原有基础上进行扩充,可*增减付款方式(最少一种,最多三种),如下图:
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" οnfοcus="Calculate(this)" οnchange="CalculateChange(this)" οnkeyup="onlyNumber(this)" οnblur="onlyNumber(this)"/>
<input type="button" id="btnAdd" value="+" class="btnAddReduce" οnclick="Add()"/>
<input type="button" id="btnReduce" value="-" class="btnAddReduce" οnclick="Reduce()"/>
</div>
<div id="divPayTypelist">
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input type="submit" value="确认" οnclick="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" οnfοcus="Calculate(this)" οnchange="CalculateChange(this)" οnkeyup="onlyNumber(this)" οnblur="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;
}
转载于:https://my.oschina.net/jokeny/blog/1577393
上一篇: 场面很尴尬,爆冷的一伙男女
下一篇: 幽默生活,需要段子来调侃