如果選中復選框，我如何從復選框中獲取屬性值？

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

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（）函數返回一個字符串值。