Question

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

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

说明：所以基本上一切都可以正常使用复选框。每次选中复选框时都会添加相关项。我一直在努力让选择输入选项依赖于复选框和功能。

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

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

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

Answer 1

表单操作元素回复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(); }); - 这对BTW无效。

＆＃13;

label {
  display: block;
}

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以这样做：

MTLFence

Answer 2

您正在寻找

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

select不是输入元素。

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

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>

Answer 3

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

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元素上触发，而不是选项：

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

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

添加输入的所有相关性的总和。使用复选框可以正常工作，直到添加选择输入

3 个答案: