表格计算器复选框需要额外支付10%-如何取消选中复选框和10%

时间:2019-05-02 14:15:19

标签: javascript forms checkbox calculator uncheck

我使用了Kaosweaver的旧Adobe Dreamweaver扩展程序,称为表格计算器。它为我提供了一个基本的表格计算器,并由客户说明他们需要的瓷砖总平方米。结果是该区域所需的瓷砖总数。

然后我添加了一个复选框,以便客户可以将总点击量增加10%。

但是,onclick与true和false并不相同,当客户取消选中该复选框时,它将被视为新的onclick,并添加了另外10%而不是删除了前10%。

  

(10%实际上是* 1.1)。

有人可以告诉我如何获取代码,以便该复选框执行我打算的工作方式。

function MM_findObj(n, d) { //v4.01
  var p, i, x;
  if (!d) d = document;
  if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
    d = parent.frames[n.substring(p + 1)].document;
    n = n.substring(0, p);
  }
  if (!(x = d[n]) && d.all) x = d.all[n];
  for (i = 0; !x && i < d.forms.length; i++)
    x = d.forms[i][n];
  for (i = 0; !x && d.layers && i < d.layers.length; i++)
    x = MM_findObj(n, d.layers[i].document);
  if (!x && d.getElementById) x = d.getElementById(n);
  return x;
}

function KW_getVal(o) { //v1.2
  var retVal = "0";
  if (o.type == "select-one") {
    retVal = (o.selectedIndex == -1) ?
      0 : o.options[o.selectedIndex].value;
  } else if (o.length > 1) {
    for (var i = 0; i < o.length; i++)
      if (o[i].checked) retVal = o[i].value;
  } else if (o.type == "checkbox") {
    retVal = (o.checked) ? o.value : 0;
  } else {
    retVal = Number(o.value)
  }
  return parseFloat(retVal);
}

function KW_calcForm() { //v1.2
  var str = "",
    a = KW_calcForm.arguments;
  for (var i = 3; i < a.length; i++)
    str += (a[i].indexOf("#") == -1) ? a[i] : KW_getVal(MM_findObj(a[i].substring(1)));
  t = Math.ceil(a[1] * eval(str)) / a[1];
  tS = t.toString();
  if (a[2] > 0) {
    tSp = tS.indexOf(".");
    if (tSp == -1) tS += ".";
    tSp = tS.indexOf(".");
    while (tSp != (tS.length - 1 - a[2])) {
      tS += "0";
      tSp = tS.indexOf(".");
    }
  }
  MM_findObj(a[0]).value = tS;
}
<h3>Tile Calculator</h3>
<form id="form1" name="form1" method="post">
  <p> <label 
  onclick="KW_calcForm('number of tiles',1,-1,'#squaremeters','*','50')">square meters                       <input name="square meters" type="text" id="squaremeters"             
  onkeyup="KW_calcForm('number of tiles',1,-1,'#squaremeters','*','50')" />
            </label>
  </p>
  <p>
    <label>number of tiles
            <input type="text" name="number of tiles" id="numberoftiles" 
             readonly />
              </label>
  </p>

  <p><strong>Remember! We always recommend to add 10% extra for cuts</strong></p>


  <input name="10pecent" type="checkbox" id="myCheck" 
  onClick="KW_calcForm('number of tiles',1,-1,'#numberoftiles','*','1.1')" value="plus10percent"> <label>add 10% extra to total.</label>

</form>

1 个答案:

答案 0 :(得分:0)

在网站上,将使用元字段{{product.metafields.cal.sqm}}代替数字50,但在本示例中,我使用数字。

function MM_findObj(n, d) { //v4.01
  var p, i, x;
  if (!d) d = document;
  if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
    d = parent.frames[n.substring(p + 1)].document;
    n = n.substring(0, p);
  }
  if (!(x = d[n]) && d.all) x = d.all[n];
  for (i = 0; !x && i < d.forms.length; i++)
    x = d.forms[i][n];
  for (i = 0; !x && d.layers && i < d.layers.length; i++)
    x = MM_findObj(n, d.layers[i].document);
  if (!x && d.getElementById) x = d.getElementById(n);
  return x;
}

function KW_getVal(o) { //v1.2
  var retVal = "0";
  if (o.type == "select-one") {
    retVal = (o.selectedIndex == -1) ?
      0 : o.options[o.selectedIndex].value;
  } else if (o.length > 1) {
    for (var i = 0; i < o.length; i++)
      if (o[i].checked) retVal = o[i].value;
  } else if (o.type == "checkbox") {
    retVal = (o.checked) ? o.value : 0;
  } else {
    retVal = Number(o.value)
  }
  return parseFloat(retVal);
}

function KW_calcForm() { //v1.2
  var str = "",
    a = KW_calcForm.arguments;
  for (var i = 3; i < a.length; i++)
    str += (a[i].indexOf("#") == -1) ? a[i] :
    KW_getVal(MM_findObj(a[i].substring(1)));
  t = Math.ceil(a[1] * eval(str)) / a[1];
  tS = t.toString();
  if (a[2] > 0) {
    tSp = tS.indexOf(".");
    if (tSp == -1) tS += ".";
    tSp = tS.indexOf(".");
    while (tSp != (tS.length - 1 - a[2])) {
      tS += "0";
      tSp = tS.indexOf(".");
    }
  }
  MM_findObj(a[0]).value = tS;
}
<form id="form1" name="form1" method="post">


  <div class="product-form--atc-qty form-fields--qty" data-quantity- wrapper="">

    <div class="form-field form-field--qty-input">


      <input class="form-field-input form-field-number form-field-filled" value="" type="text" pattern="\d*" name="square meters" type="text" id="squaremeters" onkeyup="KW_calcForm('quantity',1,-1,'#square meters','*','50')" />
      <label class="form-field-title">Sq metres</label>

    </div>

  </div>

</form>
<form>

  <input name="id" value="{{ product.variants[0].id }}" type="hidden">


  <div class="product-form--atc">
    <div class="product-form--atc-qty form-fields--qty">

      <div class="form-field form-field--qty-input">
        <input class="form-field-input form-field-number form-field-filled" value="0" id="Quantity" name="quantity" type="text" pattern="\d*" onkeyup="KW_calcForm('square meters',10,-1,'#Quantity','/','50')" aria-label="{{ 'general.general.quantity' | t }}" data-quantity-input>
        <label class="form-field-title">Quantity</label>

      </div>


    </div>


  </div>




</form>
<p>