は、どのように私はスパンでチェックボックスと値を選択することで、合計を取ると私はチェックボックスを選択し、スパンから値を取得し、金額のIDを持つ別のスパンで合計を表示する必要が

Question

別のスパンで、合計を表示しません

<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

これを試してみてください：まず、DOMの各要素にユニークなIDを使用する必要がありますので、id="you-are"を削除するか、各チェックボックスごとに一意にしてください。他の要素についても同様です。

チェックボックスのクリックハンドラを記述し、変数に価格の値を追加して、チェックボックスのチェックボックスの合計を得ることができます。金額スパンで値を表示します。

- チェックボックス入力からすべてのidsを削除し、金額スパンの末尾にspanタグを追加しました。

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