Wie kann ich Attributwert von einem Kontrollkästchen erhalten, wenn es aktiviert ist?

Question

Nun, ich habe diese Texteingabe, die Summe aller Attribute von "Preis" in allen Checkboxen wird überprüft. jetzt kann ich keinen Attributwert von einer Checkbox erhalten.

hier ist meine Funktion:

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

Dank !!!

Answer 1

Ihr Code ist ein Los komplexer als es sein muss.

Zuerst sollten Sie data-* Attribute verwenden, um benutzerdefinierte Daten einem Element zuzuweisen. Wenn Sie Ihre eigenen nicht standardmäßigen Attribute erstellen, ist Ihr HTML-Code ungültig und kann zu anderen Problemen führen. Wenn sich Ihr Code auf das price Attribut bezieht, sollte es sich außerdem in dem DOM befinden, wenn die Seite geladen wird.

Zweitens ist es nicht notwendig, ein Array von einzelnen Elementen zu erstellen. Sie können sie alle in einem einzigen jQuery-Objekt auswählen und einen Ereignishandler change() in einem einzigen Aufruf festlegen. Ich habe sie im folgenden Beispiel nach class gruppiert.

Schließlich können Sie die Summe aller Preise durch Schleifen durch die :checked Boxen und addieren Sie ihre Preise. Versuchen Sie folgendes:

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

Sie haben vergessen, nur den Rückgabewert einer Zahl zu analysieren:

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

der attr() Funktion einen String-Wert zurückkehrt.

Answer 3

Um den Wert des Value zu erhalten Attribut, das Sie so etwas tun kann:

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

Oder wenn Sie eine Klasse oder ID für sie festgelegt haben, Sie können:

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

Allerdings wird dies den gleichen Wert Whet zurückgeben Wenn es überprüft wird oder nicht, kann dies verwirrend sein, da es sich vom übergebenen Formularverhalten unterscheidet.

Um zu überprüfen, ob es aktiviert ist oder nicht, tun:

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