1

Суть очень проста. Необходимо было создать 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 и консоли нет)
7
  • По-поводу первого вопроса: нужно создать объект с парами идентификатор чекбокса: его значение, потом брать инфо оттуда. Ну и изменять ее, по необходимости. Так же нужно будет как-то различать чекбоксы, либо доп атрибут записать, либо по местоположению в массиве...
    – Dmytro
    18 фев 2018 в 9:51
  • Вы хотите, чтобы сохранялось количество и input независимо от того выбран checkbox или нет?
    – user216615
    18 фев 2018 в 9:55
  • @slo_nik нет, чтоб оно очищалось, как и сейчас, но, при включении чекбокса снова, чтоб значение возвращалось на 21. 18 фев 2018 в 10:02
  • @AlexeyGiryayev, как вариант - при отключении чекбокса помещать значение input в какой-нибудь data атрибут, а при включении - восстанавливать оттуда. 18 фев 2018 в 10:12
  • @Дмытрык сейчас у меня есть функция для каждой строки и внутри неё можно добавить атрибут со значением из input. А потом из этого атрибуту возвращать данные. Скорее всего так и буду делать, если никто не предложит ничего лучше 18 фев 2018 в 10:13

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.