javascript - 如果选中，如何从复选框中获取属性值？

Question

好吧，我有这个文本输入，它获取所有选中复选框内“价格”的所有属性的总和。现在我无法从复选框中获取属性值。

这是我的功能:

function sum_options() {
    var options = [];
    $("#form-field-1-11-1").attr("price", 500);
    $("#form-field-1-11-2").attr("price", 500);
    $("#form-field-1-11-3").attr("price", 0);
    $("#form-field-1-11-4").attr("price", 300);
    $("#form-field-1-11-5").attr("price", 500);
    $("#form-field-1-11-6").attr("price", 500);
    $("#form-field-1-11-7").attr("price", 1250);
    $("#form-field-1-11-8").attr("price", 500);
    $("#form-field-1-11-9").attr("price", 700);
    options[0] = $("#form-field-1-11-1");
    options[1] = $("#form-field-1-11-2");
    options[2] = $("#form-field-1-11-3");
    options[3] = $("#form-field-1-11-4");
    options[4] = $("#form-field-1-11-5");
    options[5] = $("#form-field-1-11-6");
    options[6] = $("#form-field-1-11-7");
    options[7] = $("#form-field-1-11-8");
    options[8] = $("#form-field-1-11-9");
    var total = 0;
    $.each(options, function() {
        this.on("change", function() {
            total += this.attr("price");
        });
    });
    $("#sum-field").val(total);
}

谢谢!!!

Answer 1

您的代码比需要的复杂很多。

首先，您应该使用data-* 属性将自定义数据分配给元素。创建您自己的非标准属性将意味着您的 HTML 无效并可能导致其他问题。此外，如果您的代码依赖于 price 属性，那么它应该在页面加载时位于 DOM 中。

其次，无需构建单个元素的数组。您可以将它们全部选择到一个 jQuery 对象中，并在单个调用中为它们设置一个 change() 事件处理程序。在下面的示例中，我按 class 对它们进行了分组。

最后，您可以通过遍历 :checked 框并将它们的价格相加来获得所有价格的总和。试试这个:

$('.checkbox').change(function() {
  var total = 0;
  $('.checkbox:checked').each(function() {
    total += parseFloat($(this).data('price'));
  });
  $("#sum-field").val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="form-field-1-11-1" class="checkbox" data-price="500" />
<input type="checkbox" id="form-field-1-11-2" class="checkbox" data-price="500" />
<input type="checkbox" id="form-field-1-11-3" class="checkbox" data-price="0" />
<input type="checkbox" id="form-field-1-11-4" class="checkbox" data-price="300" />
<!-- other checkboxes here... -->

<input type="text" id="sum-field" />