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

Question

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!!!

Answer 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.

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.

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

Answer 2

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

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

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

$('#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
}

Answer 3

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

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

the attr() function is returning a string value.