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

【问题标题】：How can i get attribute value from a checkbox if it's checked?如果选中，如何从复选框中获取属性值？
【发布时间】：2016-06-07 07:49:31
【问题描述】：

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

这是我的功能：

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

谢谢！！！

【问题讨论】：

请注意，在each() this 内是一个没有on() 和attr() 方法的DOMElement；在使用 $(this) 调用这些方法之前，您需要将其转换为 jQuery 对象。请参阅下面的答案以获得更完整的答案，这也可以改进您使用的逻辑。

标签： javascript jquery wordpress checkbox

【解决方案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" />

【讨论】：

@Menachem 有什么具体原因决定在这么久之后更改接受的答案吗？

【解决方案2】：

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

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

或者如果你已经为它设置了一个类或id，你可以：

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

但是，无论是否选中，这都会返回相同的值，这可能会令人困惑，因为它与提交的表单行为不同。

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

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

【讨论】：

【解决方案3】：

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

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

attr() 函数正在返回一个字符串值。

【讨论】：