JQuery CheckBoxes Добавление и удаление цен

Question

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" />$29<br/>
      <input type="checkbox" />$39<br/>
      <input type="checkbox" />$49<br/>
      <input type="checkbox" />$59<br/>
    </div>
<div class="total"><span>$0</span></div>

Задание : на основе флажков Цены должны быть добавлены в общий класс.

Я пробовал это:

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
});

Я хочу, чтобы при подборе числовых значений из флажков знак валюты был убран, а затем добавлен.

Причина : он будет окончательно использован в Sambhal, настройкагде валюта не может быть долларом во всех случаях.

Лучшей политикой будет получить валюту в некотором наборе данных и затем перенести ее в JQuery.

Пожалуйста, помогите мнедля этого.

Я не хочу использовать значение внутри ввода.

можем ли мы использовать этот вид HTML:

<div class="inputbox">
  <input type="checkbox" id="option1">
  <label for="option1">Services</label><span class="license_price bold">€29</span>
</div>

Когда флажок установлен, мы можем получитьцена этого промежутка через класс? Это спрос на самом деле.

Answer 1

Учитывая html, значение, соответствующее флажку, может быть получено с помощью .nextSibling.textContent, и вам нужно изменить итоговый селектор на .total, поскольку у вас есть класс, а не идентификатор:

$(document).ready(function() {
  var originalPrice = +$('.total').html();
  $("input[type='checkbox']").click(function() {
    var priceTotal = originalPrice;
    $("#calculator input[type='checkbox']:checked").each(function() {
      priceTotal += parseInt($(this).siblings('.license_price.bold').html().replace("€", ''), 10);
    });
    $('.total').html(priceTotal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
  <div class="inputbox">
    <input type="checkbox" id="option1">
    <label for="option1">Services1</label><span class="license_price bold"> €29</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option2">
    <label for="option2">Services2</label><span class="license_price bold"> €39</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option3">
    <label for="option3">Services3</label><span class="license_price bold"> €49</span>
  </div>
  <div class="inputbox">
    <input type="checkbox" id="option4">
    <label for="option4">Services4</label><span class="license_price bold"> €59</span>
  </div>
</div>
<span>$<span class="total">56</span></span>

Answer 2

Есть несколько ошибок:

Вы не установили никаких значений для своих входов. Таким образом, значение, которое они возвращают, это просто on или off.

. Установите их непосредственно как атрибут.

Затем вы выберете неправильный вывод. У вашего html итога есть класс, вы выбираете идентификатор. Кроме того, вы неправильно указали html.

Посмотрите на эту скрипку: https://jsfiddle.net/o260skn9/

Answer 3

i have fixed your code..
the best way is if you value take from html that's not a good way.
the better is you should use value attribute.
it's just a suggestion 

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('#total').html(priceTotal);
  });
       

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" value="29" />$29<br/>
      <input type="checkbox" value="39" />$39<br/>
      <input type="checkbox" value="49" />$49<br/>
      <input type="checkbox" value="59" />$59<br/>
    </div>
<div class="total">$<span id="total">0</span></div>

Answer 4

У вас есть 2 проблемы:

1 на вашем входе отсутствует свойство value.

2 вы используете $('#total'), а не $('.total')

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('.total').html(priceTotal);
  });
});

Демо

$(document).ready(function(){
  $("input[type='checkbox']").click(function(){
      var priceTotal = 0;
      $("#calculator input[type='checkbox']:checked").each(function() {
          priceTotal += parseInt(this.value, 10);
      });
      $('.total').html(priceTotal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
      <input type="checkbox" value="29" />$29<br/>
      <input type="checkbox" value="39" />$39<br/>
      <input type="checkbox" value="49" />$49<br/>
      <input type="checkbox" value="59" />$59<br/>
    </div>
<div class="total"><span>$0</span></div>