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

您的代码是 lot 比它需要的更复杂。

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

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

最后，您可以循环浏览:checked框并添加价格来获取所有价格的总和。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要获取Value属性的值，您可以执行以下操作：

$("input[type='checkbox']").val();

或者，如果您为其设置了类或ID，则可以：

$('#check_id').val();
$('.check_class').val();

然而，无论是否检查，这都将返回相同的值，这可能会造成混淆，因为它与提交的表单行为不同。

要检查是否已选中，请执行以下操作：

if ($('#check_id').is(":checked"))
{
  // it is checked
}

Answer 3

您只是忘了将返回值解析为数字：

parseInt(this.attr("price"));

attr（）函数返回一个字符串值。

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

3 个答案: