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

Well, I have this text input that gets sum of all the attributes of "price" inside all checkboxes are checked. now i can't get an attribute value from a checkbox.

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

here is my function:

这是我的功能:

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

thanks!!!

3 个解决方案

#1

Your code is a lot more complex than it needs to be.

您的代码比它需要的复杂得多。

Firstly, you should use data-* attributes to assign custom data to an element. Creating your own non-standard attributes will mean your HTML is invalid and can lead to other issues. Also, if your code is relying on the price attribute, then it should be in the DOM when the page loads.

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

Secondly there's no need to build an array of single elements. You can select them all in to a single jQuery object and set a change() event handler on them in a single call. I grouped them by class in the below example.

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

Lastly you can get the total of all the prices by looping through the :checked boxes and adding up their prices. Try this:

最后,您可以通过以下方式获取所有价格的总和:复选框并将其价格相加。尝试这个:

$('.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" />

#2

To get the value of the Value attribute you can do something like this:

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

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

Or if you have set a class or id for it, you can:

或者,如果您为其设置了类或ID,则可以:

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

However this will return the same value whether it is checked or not, this can be confusing as it is differnt to the submitted form behaviour.

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

To check whether it is checked or not, do:

要检查是否已选中,请执行以下操作:

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

#3

You just forgot to parse the return value to a number:

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

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

the attr() function is returning a string value.

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

#1