Question

我有一个经典的asp表单来向网站添加产品。该表格有3个字段“价格”，“促销”价格和“待售”复选框。

我想要做的是，当用户输入“价格”并勾选“在售”复选框时，一些javascript将以“价格” - 10％的价格完成“销售价格”。

想知道是否有人知道该怎么做？：d

谢谢。

Answer 1

HTML：

Price:<br>
<input type="text" name="price" id="price"><br>
<br>
Sale price:<br>
<input type="text" name="sale_price" id="sale_price"><br>
<br>
<input type="checkbox" name="on_sale" onchange="calculate_sale_price(this);"> On sale

使用Javascript：

function calculate_sale_price(checkbox)
{
    price = document.getElementById('price');
    sale_price = document.getElementById('sale_price');
    sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;
}

如果未选中复选框，您希望销售价格为空，请更改以下行：

sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;

为：

sale_price.value = checkbox.checked ? price.value * 0.9 : '';

Answer 2

使用HTML会更容易;），类似的东西可以解决这个问题：

$('#yourCheckBox').change(function(){
  if($("#yourCheckBox option:selected").length){
    $('#yourSalePrice').val(
      $('#yourPrice') - (($('#yourPrice').val()/100)*10)
    );
  }
});

在计算任何内容之前，您还可以添加一些支票，如果价格为

Answer 3

我已根据以下标记在jsbin发布了一个演示：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(
      function() {
        $('#onSale').change(
          function() {
            var salePrice = $('#price').val() * 0.9;
            $('#salePrice').val(salePrice);
          }
        );
      }
      );

  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>

<form method="post" action="">
  <fieldset>
    <label for="price">Price:</label>
    <input type="text" id="price" name="price" />

    <input type="text" name="salePrice" id="salePrice" disabled="disabled" />
    <input type="checkbox" name="onSale" id="onSale" />
  </fieldset>
</form>

</body>
</html>

我建议你需要为用户输入的价格建立验证（确保它是一个数字价格，一开始）。我已将#salePrice禁用，以便用户不太可能输入数据（尽管这并非不可能）。

已编辑以回应OP的评论。

要在用户取消勾选复选框后清除该字段：

$(document).ready(
  function() {
    $('#onSale').change(
      function() {
        if ($('#onSale').is(':checked')) {
          var salePrice = $('#price').val() * 0.9;
          $('#salePrice').val(salePrice);
        }
        else {
          $('#salePrice').val('');
        }
      }
    );
  }
  );

请注意新if/else，此处为the revised demo

Answer 4

正如其他人通过他们的代码展示的那样，您可以通过向复选框添加事件侦听器来实现此目的。它很干净，不会妨碍ASP表单代码。既然你放了jQuery，这就是我对它的看法;当然还有其他解决方案，但我觉得这是一个简洁可读的好结合。祝你好运！

   $('#chkbox').bind('click', function(evt){
       var sale = (evt.target.checked);
       var price = $('#fullprice').val();
       var disc = (+price > 0 && sale ) ? price*.9 : ''
       $('#saleprice').val( disc );
    });

表格onChange计算

4 个答案: