选中CheckBox时保留TextBox值 [英] Retain TextBox value when CheckBox is checked
问题描述
我有一组 TextBox ，可以根据毛额（用户输入）自动计算总计。
每个文本框都有一个基于另一个文本框的条件。
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.
我的计算工作正常，但是我需要一个 CheckBox 来允许用户决定是否删除税或保留它。每次选中 CheckBox 时，我已变为零的文本框的值。有人可以帮我吗？
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());
}
});
});
});
前端
<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>
推荐答案
首先，要为DevExpress文本框控件需要将 ClientInstanceName 属性设置为文本框客户端ID：
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>
由于示例中提供的ASP.NET标准复选框控件未指定 ClientIDMode = Static 属性，它假定已预先分配了 ClientID ，以便客户端事件使用复选框 click 触发器如下：
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
}
注意：您大约n将 $（this）.is（'：checked'）替换为 $（。checkbox）。is（'：checked'），如果您确定 CssClass = checkbox 定义的页面上只有一个复选框。
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".
引用：
ASPxClientTextEdit.SetText （DevExpress文档）
ASPxClientTextEdit.SetText (DevExpress Documentation)
这篇关于选中CheckBox时保留TextBox值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
