选中CheckBox时保留TextBox值

时间:2017-07-21 03:13:10

标签: javascript asp.net devexpress

我有一套TextBox,会自动计算总数'基于总金额' (用户输入)。 每个文本框都有一个基于另一个文本框的条件。

我的计算效果很好,但我需要一个CheckBox来允许用户决定是否删除“税”。或保留它。每次检查CheckBox时,我所拥有的文本框的值都变为零。任何人都可以帮我这个吗?

这是我到目前为止所拥有的。

的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>

1 个答案:

答案 0 :(得分:1)

首先,要为DevExpress文本框控件提供客户端功能,您需要将ClientInstanceName属性设置为文本框客户端ID:

<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" 
ClientInstanceName="txtbx_add">
...
</dx:ASPxTextBox>

由于示例中提供的ASP.NET标准复选框控件未指定ClientIDMode="Static"属性,因此假定已预先指定ClientID,以便客户端事件使用复选框click触发如下:

$(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
}

注意:如果您确定$(this).is(':checked')定义的页面上只有一个复选框,则可以将$(".checkbox").is(':checked')替换为CssClass="checkbox"

参考文献:

jquery check if asp checkbox is checked

ASPxClientTextEdit.SetText(DevExpress文档)