Сумма значений всех отмеченных checkbox

Question

Существует N-ое кол-во чекбоксов (checkbox) и input type='number' соответственно этим (checkbox). Если (checkbox) :checked, то мы выводим значение его value в html class="dop". Также когда меняем значение input, должно меняться значение в html. И посчитать сумму всех отмеченных (checkbox), вывести в html class = "total_dop" / У меня получилось вывести только сумму всех отмеченных (checkbox), а с input никак не могу связать.

$('.down').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.up').click(function () {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});


$('.array-checked').on('change', function () {
      var total_dop = 0;
      $('.array-checked:checked').each(function(){
        total_dop += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); 
      });
      $('.total_dop').text(parseInt(total_dop)).html;
      console.log(total_dop);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <span class="down">-</span>
      <input type="text" value="1" />
      <span class="up">+</span>
    </td>
    <td><span class="dop">3525</span> руб</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="customSwitch0" value="3525" class="array-checked">
        <span class="slider round"></span>
      </label>
    </td>
   </tr>

  <tr>
    <td>
      <span class="down">-</span>
      <input type="text" value="1" />
      <span class="up">+</span>
    </td>
    <td><span class="dop">5264</span> руб</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="customSwitch1" value="5264" class="array-checked">
        <span class="slider round"></span>
      </label>
    </td>
  </tr>
  
 <tr>
  <td>
    <span class="down">-</span>
    <input type="text" value="1"/>
    <span class="up">+</span>
  </td>
  <td><span class="dop">480</span> руб</td>
  <td>
    <label class="switch">
      <input type="checkbox" id="customSwitch2" value="480" class="array-checked">
      <span class="slider round"></span>
    </label>
  </td>
</tr>
</table>
<div class="total_dop"></div>

Answer 1

$('.down').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.up').click(function () {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});

/** Добавил ЭТО **/
$('[type="text"]').on('input', function () {
  $(this).closest('tr').find('.array-checked').trigger('change');
});
/*****************/

$('.array-checked').on('change', function () {
      var total_dop = 0;
      $('.array-checked:checked').each(function(){
        let number = $(this).closest('tr').find('[type="text"]').val(); // <--- и это
        total_dop += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val() * parseInt(number)); 
      });
      $('.total_dop').text(parseInt(total_dop)).html;
      console.log(total_dop);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <span class="down">-</span>
      <input type="text" value="1" />
      <span class="up">+</span>
    </td>
    <td><span class="dop">3525</span> руб</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="customSwitch0" value="3525" class="array-checked">
        <span class="slider round"></span>
      </label>
    </td>
   </tr>

  <tr>
    <td>
      <span class="down">-</span>
      <input type="text" value="1" />
      <span class="up">+</span>
    </td>
    <td><span class="dop">5264</span> руб</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="customSwitch1" value="5264" class="array-checked">
        <span class="slider round"></span>
      </label>
    </td>
  </tr>
  
 <tr>
  <td>
    <span class="down">-</span>
    <input type="text" value="1"/>
    <span class="up">+</span>
  </td>
  <td><span class="dop">480</span> руб</td>
  <td>
    <label class="switch">
      <input type="checkbox" id="customSwitch2" value="480" class="array-checked">
      <span class="slider round"></span>
    </label>
  </td>
</tr>
</table>
<div class="total_dop"></div>

БЛОГ НА HUSL

Сумма значений всех отмеченных checkbox

Ответы (1 шт):