问题
I have a set of TextBox that will automatically compute the 'total' based on 'gross amount' (user input).
Each text box has a condition that is based on another text box.
My computation works perfectly, but I need a CheckBox to allow the user to decide whether to remove the 'tax' or retain it. Every time the CheckBox is checked, the value of the text boxes that I have became zero. Can anyone help me with this?
Here is what I have so far.
JavaScript
$(document).ready(function () {
Number.prototype.formatMoney = function (c, d, t) {
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
});
$(document).ready(function () {
$(this).keyup(function aa() {
$("input[name='txtbx_less']").each(function (index) {
var txtbx_gross = $("input[name='txtbx_gross']").eq(index).val().replace(/,/g, "");
var txtbx_less = parseFloat(txtbx_gross) * 0.15;
if (!isNaN(txtbx_less)) {
$("input[name='txtbx_less']").eq(index).val(txtbx_less.formatMoney());
}
});
$("input[name='txtbx_net']").each(function (index) {
var txtbx_gross = $("input[name='txtbx_gross']").eq(index).val().replace(/,/g, "");
var txtbx_less = $("input[name='txtbx_less']").eq(index).val().replace(/,/g, "");
var txtbx_net = parseFloat(txtbx_gross) - parseFloat(txtbx_less);
if (!isNaN(txtbx_net)) {
$("input[name='txtbx_net']").eq(index).val(txtbx_net.formatMoney());
}
});
$("input[name='txtbx_add']").each(function (index) {
var txtbx_net = $("input[name='txtbx_net']").eq(index).val().replace(/,/g, "");
var txtbx_add = parseFloat(txtbx_net) * 0.12;
if (!isNaN(txtbx_add)) {
$("input[name='txtbx_add']").eq(index).val(txtbx_add.formatMoney());
}
else
$("input[name='txtbx_add']").eq(index).val("0.00");
});
$("input[name='txtbx_billed']").each(function (index) {
var txtbx_net = $("input[name='txtbx_net']").eq(index).val().replace(/,/g, "");
var txtbx_add = $("input[name='txtbx_add']").eq(index).val().replace(/,/g, "");
var txtbx_billed = parseFloat(txtbx_net) + parseFloat(txtbx_add);
if (!isNaN(txtbx_billed)) {
$("input[name='txtbx_billed']").eq(index).val(txtbx_billed.toFixed(2));
}
});
$("input[name='txtbx_add1']").each(function (index) {
var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
var txtbx_add1 = parseFloat(txtbx_net1) * 0.12;
if (!isNaN(txtbx_add1)) {
$("input[name='txtbx_add1']").eq(index).val(txtbx_add1.formatMoney());
}
});
$("input[name='txtbx_billed1']").each(function (index) {
var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
var txtbx_add1 = $("input[name='txtbx_add1']").eq(index).val().replace(/,/g, "");
var txtbx_billed1 = parseFloat(txtbx_net1) + parseFloat(txtbx_add1);
if (!isNaN(txtbx_billed1)) {
$("input[name='txtbx_billed1']").eq(index).val(txtbx_billed1.formatMoney());
}
});
});
});
Front-end
<table class = "billcomp">
<tr>
<td class = "prebiltd">GROSS AMOUNT :</td>
<td class = "prebiltd">
<dx:ASPxTextBox ID="txtbx_gross" runat="server" Width="170px" Theme="Material">
<MaskSettings Mask="<0..99999999g>.<00..99>" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td class = "prebiltd">LESS: 15% ASF :</td>
<td class = "prebiltd">
<dx:ASPxTextBox ID="txtbx_less" runat="server" Width="170px" Theme="Material">
<MaskSettings Mask="<0..99999g>.<00..99>" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td class = "prebiltd">NET AMOUNT :</td>
<td class = "prebiltd">
<dx:ASPxTextBox ID="txtbx_net" runat="server" Width="170px" Theme="Material">
<MaskSettings Mask="<0..99999g>.<00..99>" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:CheckBox runat="server" ID="chckbox_nonvat" Text="NON-VAT" />
</td>
</tr>
<tr>
<td class = "prebiltd">ADD 12% VAT :</td>
<td class = "prebiltd">
<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material">
<MaskSettings Mask="<0..99999g>.<00..99>" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td class = "prebiltd">BILLED AMOUNT :</td>
<td class = "prebiltd">
<dx:ASPxTextBox ID="txtbx_billed" runat="server" Width="170px" Theme="Material">
<MaskSettings Mask="<0..99999g>.<00..99>" />
</dx:ASPxTextBox>
</td>
</tr>
</table>
回答1:
First of all, to provide client-side capability for DevExpress textbox controls you need to set ClientInstanceName attribute as the textbox client ID:
<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material"
ClientInstanceName="txtbx_add">
...
</dx:ASPxTextBox>
Since ASP.NET standard checkbox control provided in the sample doesn't specify ClientIDMode="Static" attribute, it assumed to have pre-assigned ClientID so that client-side event uses checkbox click trigger given below:
$(document).ready(function () {
// other stuff
// get current DX textbox value
// this value should be stored before using checkbox click event
var value = txtbx_add.GetText(); // or use GetValue()
$('#<%= chckbox_nonvat.ClientID %>').click(function () {
if ($(this).is(':checked')) {
txtbx_add.SetText(0); // if checked, set to 0
} else {
txtbx_add.SetText(value); // if unchecked, set to previous state
}
});
// other stuff
}
NB: You can substitute $(this).is(':checked') to $(".checkbox").is(':checked') if you're sure there is only one checkbox at the page defined by CssClass="checkbox".
References:
jquery check if asp checkbox is checked
ASPxClientTextEdit.SetText (DevExpress Documentation)
来源：https://stackoverflow.com/questions/45228372/retain-textbox-value-when-checkbox-is-checked