如果选中了复选框，如何从该复选框获取属性值？

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