有没有更好的方法来乘以我所拥有的输入值？

Question

我正在尝试将输入值相加或相乘以达到两个总和，这在没有尝试使用 for 循环的情况下有效。我的目的是将选择器与每个字符串末尾的 i 的各种迭代相匹配。我这里有一个 fiddle 例子：https://jsfiddle.net/shiataz12/Lo1yek2g/69/

我尝试复制并粘贴该函数，同时为每次迭代手动输入名称，但是它也不太有效，因为只有前两个和最后两个复选框在单击时才会执行任何操作。

HTML :

<--- HTML SECTION --->>
// obtained from $nosday = $_POST['nosday'];
<br>
// value is normally $nosday
<br>
<input type="text" value="5" id="nosday"><br><br>
 // obtained from $count = mysqli_num_rows($result);
 <br>
 // value is normally $count;
 <br>
<input type="text" value="2" id="countrows"><br><br>
<label for="checkbox1">Standard</label>
<<----Assume checkbox --> id --> is $qri and $qri = "qr"."$i";
<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr1" checked><br><br>
<label for="checkbox1">Equipped</label>
<input type="checkbox" name="checkbox1" class="quip" value="225" id="qr1"><br><br>
<label for="checkbox3">GPS</label>
<input type="checkbox" name="checkbox3" value="20" id="qr1"><br><br>
<label for="checkbox4">booster</label>
<input type="checkbox" name="checkbox4" value="20" id="qr1"><br><br>
<label for="checkbox5">One tent</label>
<input type="checkbox" name="checkbox5" class="tents" value="60" id="qr1" checked><br><br>
<label for="checkbox6">Two tents :</label>
<input type="checkbox" name="checkbox6" class="tents" value="80" id="qr1"><br><br>
// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";
<br>
Daily :<span id="dailytotal1"> </span><br><br>

// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";
<br>
Total :<span id="lengthtotal1"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot1" name="pricef1" value="">
<br>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot" name="pricef2" value="">
<input type="text" value="2" id="countrows"><br><br>
<label for="checkbox1">Standard</label>
<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr2" checked><br><br>
<label for="checkbox1">Equipped</label>
<input type="checkbox" name="checkbox1" class="quip" value="225" id="qr2"><br><br>
<label for="checkbox3">GPS</label>
<input type="checkbox" name="checkbox3" value="20" id="qr2"><br><br>
<label for="checkbox4">booster</label>
<input type="checkbox" name="checkbox4" value="20" id="qr2"><br><br>
<label for="checkbox5">One tent</label>
<input type="checkbox" name="checkbox5" class="tents" value="60" id="qr2" checked><br><br>
<label for="checkbox6">Two tents :</label>
<input type="checkbox" name="checkbox6" class="tents" value="80" id="qr2"><br><br>
Daily :<span id="dailytotal2"> </span><br><br>
Total :<span id="lengthtotal2"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot2" name="pricef1" value="">
<br>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot2" name="pricef2" value="">

$(function() {
  $("input.quip").change(function() {
    $("input.quip").not(this).prop("checked", false);
  });
    $("input.tent").change(function() {
    $("input.tent").not(this).prop("checked", false);
  });
  $(function() {
    //get the values of the selected options
      var counter = ("#countrows").val();
            var i = 0;
      for (i = 1; i <= counter; i++){
    let v = $.map($('#qr' + i).is("checked"), function(i) {
      return parseFloat($(i).val());
    });

    let s = v.reduce((a, b) => a + b); //sum them up to a daily total
    console.log(v);
    $('#dailytotal' + i).text('R' + s + '/day');
    $('#lengthtotal' + i).text('R' + s * parseFloat($("#nosday").val()) + '/day');
    $('#dailytot' + i).val(s);
    $('#lengthtot' + i).val(s * parseFloat($("#nosday").val()));
      }
      });
});

所提供的示例假定数据库有两行，因此 i = 2，因此 id 应更改为 qr2 for i=2。我希望通过使用行数作为在 Jquery 中使用 for 的基础来工作，限制行数以便每个部分可以独立行动，但是它们继续一起对函数做出反应并执行不显示任何值。

我想也许我现在可以让它工作并且 copy/paste 带有个人 ID 的代码会让我有时间研究更好的解决方案，但它并没有像我预期的那样工作。使用 map 之前声明一个数组会更好吗？我可以在输入中使用相同的 id 作为数组吗？它使计算更容易，虽然我想我可以使用名称选择器。

希望有人能指导我找到正确答案，这让我很困惑。

Answer 1

稍微修剪了一下。还有其他问题。 "Labels for" 假定是指标记元素的 id。 "Standard" 和 "Equipped" 选项实际上是单选按钮，而不是复选框，因为您可能有其他选项之一。我重命名了一些 classes 和 id，尽管您可能不需要所有这些。我假设您可能正在动态生成 HTML 并根据您拥有的行数为后缀添加 "i" 的值。实际上，我只是对第一行进行了更改并重写了 JS，以便为您提供项目的总计，形成该行输入元素中的值。不确定你是如何计算这些总数的，因为我认为 $("#multiplier") 甚至不在你的代码中。您将不得不仔细查看并查看您想要的内容，但总计看起来它正在运行。

<--- HTML SECTION --->>
// obtained from $nosday = $_POST['nosday'];
<br>
// value is normally $nosday
<br>
<input type="hidden" value = "1.5" id = "multiplier">
<input type="text" value="5" id="nosday"><br><br>
 // obtained from $count = mysqli_num_rows($result);
 <br>
 // value is normally $count;
 <br>
<input type="hidden" value="2" id="countrows"><br><br>
// Assume checkbox  is $qri and $qri = "qr"."$i";<br>

<label for="standard1">Standard</label>
<input type="radio" name="equipment" id ="standard1" class="quip qr1" value="125" checked><br><br>

<label for="equipped1">Equipped</label>
<input type="radio" name="equipment" id ="equipped1" class="quip qr1" value="225" ><br><br>

<label for="gps1">GPS</label>
<input type="checkbox" name="gps" id ="gps1" value="20" class ="qr1"><br><br>

<label for="booster1">booster</label>
<input type="checkbox" name="booster" id ="booster1" value="20" class ="qr1"><br><br>

<label for="tents1">One tent</label>
<input type="checkbox" name="tents" id ="tents1" class="tents qr1" value="60" checked><br><br>

<label for="twotents1">Two tents :</label>
<input type="checkbox" name="twotents" id ="twotents1" class="tent qr1" value="80"><br><br>

// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";
<br>
Daily :<span id="dailytotal1"> </span><br><br>

// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";
<br>
Total :<span id="lengthtotal1"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot1" name="pricef1" value="">
<br>

JS 可能需要调整，因为我不知道你是如何生成 HTML 的。事实上，它应该计算加载时所有 "i" 行的总计，并且添加一些东西让它计算 "ith" 行的总计并不难。那应该给你一些工作。

function Calc() {
    //get the values of the selected options
      var counter = $("#countrows").val();
      let totals = [];
            for (i = 1; i <= counter; i++) {
      totals[i] = 0;
      $.each($('.qr' + i + ':checked'), function() {
        totals[i] += parseInt($(this).val());
      });
      console.log(totals[i]);
    $('#dailytotal' + i).text('R' + totals[i] + '/day');
    $('#lengthtotal' + i).text('R' + totals[i] * parseFloat($("#multiplier").val()) + '/day');
    $('#dailytot' + i).val(totals[i]);
    $('#lengthtot' + i).val(totals[i] * parseFloat($("#multiplier").val()));

      }

}    

Calc();

$("[class*=qr]").on("change", function(e) {
e.preventDefault();
Calc();

});

"[class*=qr]" 并不是最好的，因为 *=qr 并不是那么具体，具体取决于您的标记。另外，不清楚您是否在任何地方都使用了表单标签。

有没有更好的方法来乘以我所拥有的输入值？

Is there a better way to multiply input values then what I have?

php

jquery

multiplication

addition