Wie kann ich Summe nehmen durch Checkbox und Werte in Spanne Auswahl und insgesamt zeigen, in einer anderen Spanne

Question

Ich brauche Checkbox auswählen und die Werte von Spanne und zeigen die Summe in einer anderen Spanne greift id Menge mit

<div class="col1"> 
      <div class="field"> 
      <div class="label-wrap"> 
       <label class="required" for="buy_form_pwd2">Books Required</label> 
      </div> 
      <div class="input-wrap"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">250</span><br><hr style="margin:0;"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">375</span><br><hr style="margin:0;"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">350</span><br><hr style="margin:0;"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">200</span><br><hr style="margin:0;"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;"> 
       <input type="checkbox" id="you-are" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;"> 
      </div> 
      </div> 
     </div> 
     <div class="extra-col"> 
      <ul> 
      <li><span class="autorization-redirect"><b>Total Amount</b></li><hr> 
      <li style="text-align:right;"><span class="autorization-redirect">Rs.</span><span class="autorization-redirect" id="amount"></li> 
      </ul> 
     </div> 

Answer 1

Versuchen Sie Folgendes: Zunächst müssen Sie für jedes Element im DOM eindeutige IDs verwenden. Entfernen Sie entweder id="you-are" oder machen Sie es für jedes Kontrollkästchen eindeutig. Folgen Sie dem gleichen für andere Elemente.

Sie können einen Click-Handler für das Kontrollkästchen schreiben und Werte einer Variablen zu einem Preis hinzufügen, um die Summe aller markierten Checkboxen zu erhalten. Wert in Betragsspanne anzeigen

HINWEIS - Ich habe alle IDs aus den Checkbox-Eingaben entfernt und den abschließenden span Tag für Betragsspanne hinzugefügt.

$(function(){ 
 
    var totalAmount = 0; 
 
    $('input[name="total"]').change(function(){ 
 
    //get last span which is just before the br element and read its text. 
 
    var $priceSpan = $(this).nextUntil('br').last(); 
 
    var amount = parseInt($priceSpan.text()) * (parseInt($priceSpan.prev('span').find('input').val()) || 1); 
 

 
    //if checked then add amount otherwise substract it. 
 
    if($(this).is(':checked')) 
 
    { 
 
     totalAmount += amount; 
 
    } 
 
    else 
 
     { 
 
     totalAmount -= amount; 
 
     } 
 
    //show total amount in amount span 
 
    $('#amount').html(totalAmount); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col1"> 
 
    <div class="field"> 
 
<div class="label-wrap"> 
 
    <label class="required" for="buy_form_pwd2">Books Required</label> 
 
</div> 
 
<div class="input-wrap"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">250</span><br><hr style="margin:0;"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">375</span><br><hr style="margin:0;"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">350</span><br><hr style="margin:0;"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">200</span><br><hr style="margin:0;"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;"> 
 
    <input type="checkbox" name="total">Book Name<span style="margin-left:10px;">Price</span><span style="margin-left:10px;">No of Books<input style="width: 45px;" type="number" placeholder="1"></span><span style="margin-left:10px;">300</span><br><hr style="margin:0;"> 
 
</div> 
 
    </div> 
 
</div> 
 
<div class="extra-col"> 
 
    <ul> 
 
<li><span class="autorization-redirect"><b>Total Amount</b></li><hr> 
 
<li style="text-align:right;"><span class="autorization-redirect">Rs.</span><span class="autorization-redirect" id="amount"></span></li> 
 
    </ul> 
 
</div>