添加输入的所有rels的总和。与复选框一起工作正常，直到添加选择输入

Posted 2023-05-09

【中文标题】添加输入的所有rels的总和。与复选框一起工作正常，直到添加选择输入

【英文标题】：Adding sum of all the rels of the inputs. Works fine with the checkboxes, that is until select inputs are added

【发布时间】：2017-12-16 04:39:00

【问题描述】：

$(document).ready(function() 
        function recalculate() 
            var sum = 0;

            $("input[type=checkbox]:checked").each(function() 
                sum += parseInt($(this).attr("rel"));
            );

            $("#output").html(sum);
        


        $("input[type=checkbox]").change(function() 
            recalculate();
        );
    );

这是获取复选框总和的 javascript。现在我不确定如何正确地将选择输入添加到此函数中。我试过只是做

$("input[type=select]:selected").each(function()

并将其添加到代码中，但无济于事。

解释：所以基本上所有的复选框都可以正常工作。每次选择复选框时都会添加 rels。我一直在努力让选择输入选项 rels 也可以与复选框 sum 函数一起使用。

非常感谢任何帮助！ 谢谢！

[编辑]：解决方案尝试不成功

      $(document).ready(function() 
        function recalculate() 
            var sum = 0;

            $("input[type=checkbox]:checked").each(function() 
                sum += parseInt($(this).attr("rel"));
            );

            $( "select option:selected" ).each(function() 
                sum += parseInt($(this).attr("rel"));
            );

            $("#output").html(sum);
        

        $("input[type=checkbox]").change(function() 
            recalculate();
        );

        $("select option:selected").change(function() 
            recalculate();
        ); 

【问题讨论】：

没有 input 元素与 [type=select] 。您指的是select 元素吗？

是使用 元素的下拉表单选项

是什么让您决定rel 是在input 或select 元素上使用的有效属性？

我使用实际表单提交的值。这只是为了向用户显示选择了哪些选项，以及这些选项的计算总成本。有没有比我做的更好的方法？

【参考方案1】：

表单动作元素响应 value，而不是 rel - 顺便说一句，这对那些无效。

jQuery(function($) 

  function recalculate() 
    var sum = 0;

    $("#myForm").find("input:checked, select").each(function() 
      sum += parseInt(this.value, 10);
    );

    $("#output").html(sum);
    $("#myForm").find("[name='total']").val( sum );
  

  $("#myForm").on("change", "input, select", recalculate);
  recalculate();

);

label 
  display: block;

<form id="myForm">
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <label><input type="checkbox" name="c1" value="3"> 3</label>
  <label><input type="checkbox" name="c2" value="4" checked> 4</label>
  <label><input type="radio" name="r1" value="5"> 5</label>
  <label><input type="radio" name="r1" value="10" checked> 10</label>
  <br>
  <div id="output"></div>
  <input name="total" type="number" disabled>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者你可以这样做：

$("#myForm").find("input:checked, select").prop("value", function(i, v) 
  sum += parseInt(v, 10);
);

【讨论】：

我使用实际表单提交的值。这只是为了向用户显示选择了哪些选项，以及这些选项的计算总成本。这真的不可能吗。我宁愿将值设为文本字符串，因为某些输入的成本可能相同。如果我没记错的话，如果我只看到 http 请求，就不可能区分。

【参考方案2】：

您应该调整选择器，使其作用于您选择下的选项元素。所以你的函数看起来像这样：

function recalculate() 
        var sum = 0;

        $("input[type=checkbox]:checked").each(function() 
            sum += parseInt($(this).attr("rel"));
        );

        $("select option:selected").each(function()
            sum += parseInt($(this).attr("rel"));
        );

        $("#output").html(sum);
    

另外你调用的函数是错误的——事件是在选择元素而不是选项上触发的：

$("select").change(function() 
    recalculate();
); 

看看这个小提琴： https://jsfiddle.net/o2gxgz9r/9948/

【讨论】：

完美。如果下拉输入选项之一的总价优惠券有 20% 的折扣怎么办。如果你不介意。如果您能解释我如何将其纳入其中，我将不胜感激。

其中一个下拉菜单具有该选项，这将影响总价格，减少 20% 的总价格，包括仅与 rel 一起使用并具有固定价格的其他下拉菜单和复选框

我还在末尾添加了 sum = sum.toFixed(3).slice(0, -1) 以便小数点后总是有两位数。

我添加的这个东西即使没有它也不会导致这个问题。这可能是我使用的主题。但有时当我更改包含折扣的选择器时，它会卡住并且不会更新总数，甚至不会更新选择器内的文本。

但如果我点击背景。选择器更新。和价格更新。

【参考方案3】：

你正在寻找

$("select option:selected").each(function() 

select 不是输入元素。

相反，您需要遍历 change 上的 select 元素并重新计算所选选项的总和。

function recalculate() 
  var sum = 0;

  $("input[type=checkbox]:checked").each(function() 
    sum += parseInt($(this).attr("rel"));
  );

  $("select option:selected").each(function() 
    sum += parseInt($(this).text(), 10);
  );

  $("#output").html(sum);


$("input[type=checkbox]").change(function() 
  recalculate();
);


$("select").change(function() 
  recalculate();
);


$("select").trigger('change');

#output 
  margin-top: 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <input type="checkbox" rel="1000" />
  <input type="checkbox" rel="2000" />
  <input type="checkbox" rel="3000" />
</div>

<div>
  <select>
    <option value="1" rel="1">1</option>
    <option value="2" rel="2">2</option>
    <option value="3" rel="3">3</option>
    <option value="4" rel="4">4</option>
  </select>
  <select>
    <option value="10" rel="10">10</option>
    <option value="20" rel="20">20</option>
    <option value="30" rel="30">30</option>
    <option value="40" rel="40">40</option>
  </select>
  <select>
    <option value="100" rel="100">100</option>
    <option value="200" rel="200">200</option>
    <option value="300" rel="300">300</option>
    <option value="400" rel="400">400</option>
  </select>
</div>

<div id="output">
  0
</div>

【讨论】：

请问如何将其集成到代码中。在上面我将添加显示我的实现的编辑，它不起作用。