Сохранение значения из input

157
19 февраля 2018, 04:27

Суть очень проста. Необходимо было создать checkbox для каждой строки таблицы, связать его с количеством товара и вывести общую цену всех товаров с учетом количества в input. Запустите пример и все станет ясно:

$('<div class="full-price"></div>').insertBefore('.grouped'); 
$('<th class="col check"></th>').prependTo('.grouped thead tr'); 
$('<td class="col check"><input type="checkbox" class="checkbox" /></td>').prependTo('.grouped tbody tr'); 
 
$('.grouped tbody tr').each(function() { 
  var quantity = $(this).find('.input-text.qty'); 
  var checkbox = $(this).find('.checkbox'); 
 
  function checkQuantity() { 
    if ($(quantity).val() > 0) { 
      $(checkbox).prop('checked', true); 
    } else { 
      $(checkbox).prop('checked', false); 
    } 
  } 
 
  $(checkbox).change(function() { 
    if ($(this).is(':checked')) { 
      $(quantity).val(1); 
    } else { 
      $(quantity).val(0); 
    } 
    totalCost(); 
  }); 
 
  $(quantity).change(function() { 
    totalCost(); 
    checkQuantity(); 
  }); 
 
  checkQuantity(); 
 
}); 
 
function totalCost() { 
  var total = 0; 
  $(".checkbox:checked").each(function() { 
    var price = $(this).closest('tr').find('.price').text().replace('$', ''); 
    var quantity = $(this).closest('tr').find('.input-text.qty').val(); 
    var amount = (quantity * price); 
    total += amount; 
  }); 
 
  $('.full-price').text('$' + total); 
 
} 
 
totalCost();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="grouped"> 
  <thead> 
    <tr> 
      <th class="col item">Product Name</th> 
      <th class="col qty">Qty</th> 
    </tr> 
  </thead> 
 
  <tbody> 
    <tr> 
      <td class="col item"> 
        <strong>Alfa Sofa, Redeyef Brown</strong> 
        <span class="price">$440.00</span> 
      </td> 
      <td data-th="Qty" class="col qty"> 
        <input value="0" class="input-text qty" type="number"> 
      </td> 
    </tr> 
  </tbody> 
  <tbody> 
    <tr> 
      <td class="col item"> 
        <strong>Alfa Loveseat, Redeyef Brown</strong> 
        <span class="price">$370.00</span> 
      </td> 
      <td class="col qty"> 
          <input value="1" class="input-text qty" type="number"> 
      </td> 
    </tr> 
  </tbody> 
  <tbody> 
    <tr> 
      <td class="col item"> 
        <strong>ALFA Armchair, Redeyef Brown</strong> 
        <span class="price">$225.00</span> 
      </td> 
      <td class="col qty"> 
          <input value="21" class="input-text qty" type="number"> 
      </td> 
    </tr> 
  </tbody> 
</table>

Вопроса всего 2:

  • Можно ли, каким способом, сохранить количество более 1 единицы при отключении чекбокса и возврата значения при включении? (см. 3-ю строку в примере)
  • Правильно ли составлен код с логической точки зрения? Можно ли было его написать иным способом, более коротким? (PS: ошибок в JShint и консоли нет)
READ ALSO
Форма через javascript

Форма через javascript

Подскажите новичкуЕсть форма, нужно через JS файлы сделать 2 конфига: - менять бг кнопки; - менять валюту

143
Неизвестные вотермарки в верстке

Неизвестные вотермарки в верстке

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

113