Как присвоить входное значение значению флажка, а затем рассчитать проверенный итог?

Question

Как назначить <input type="text" value=""> для <input type="checkbox" value=""> без жесткого кодирования числового значения для флажка? Затем вычисляется итоговое значение на основе того, что проверено?

Например, у меня есть форма, которая запрашивает название предмета и его стоимость. Затем, когда я нажимаю кнопку отправить, он добавляет данные в таблицу. Я хочу иметь возможность установить флажок и заставить его вызывать значение из стоимости, которую я ввел. Можно ли сделать что-то вроде <input type="checkbox" value="cost"> вместо присвоения <input type="checkbox" value="10">?

Форма предназначена исключительно для визуализации. Мой фактический код может публиковать данные и более подробно с модальными, а что нет.

$(document).on("change", ".check", function() {

  var checked = $('.check:checked'),
    sum = checked.get().reduce(function(prev, item) {
      return prev + parseFloat(item.getAttribute('value'));
    }, 0);
  $('.addTotal').text(sum.toFixed(2));
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<form action="">
  <div class="form-group">
    <label for="name">Item name: </label>
    <input class="form-control" type="text" name="itemname" placeholder="Item Name" />
  </div>

  <div class="form-group">
    <label for="name">Cost: </label>
    <input class="form-control" name="cost" placeholder="Cost (insert number only)" />
  </div>

  <button type="submit">Submit</button>
  <button type="submit">Edit</button>
</form>


<br>
<br>

<table class="table table-hover table-sm bookstable">
  <thead>
    <tr>
      <th></th>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><input type="checkbox" class="check" name="" value="cost" /></td>
      <!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
      <td>Item1</td>
      <td>$10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check" name="" value="" /></td>
      <!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
      <td>Item2</td>
      <td>$30</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">
        <div>Total $: <span class="addTotal"></span></div>
      </td>
    </tr>
  </tfoot>
</table>

Answer 1

Вы можете сделать это, используя метод jQuery .parent().

Документация jQuery

Получить предков каждого элемента в текущем наборе совпадающих элементов, необязательно отфильтрованных селектором. Метод .parent() аналогичен методу .parents().

Рабочий код

var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
  if ($(this).is(":checked")) {
    total += cost;
  } else {
    total += -cost;
  }
  $(".addTotal").text(total);
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<form action="">
  <div class="form-group">
    <label for="name">Item name: </label>
    <input class="form-control" type="text" name="itemname" placeholder="Item Name" />
  </div>

  <div class="form-group">
    <label for="name">Cost: </label>
    <input class="form-control" name="cost" placeholder="Cost (insert number only)" />
  </div>

  <button type="submit">Submit</button>
  <button type="submit">Edit</button>
</form>


<br>
<br>

<table class="table table-hover table-sm bookstable">
  <thead>
    <tr>
      <th></th>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><input type="checkbox" class="check" name="" value="cost" /></td>
      <!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
      <td>Item1</td>
      <td class="cost">$10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check" name="" value="" /></td>
      <!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
      <td>Item2</td>
      <td class="cost">$30</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">
        <div>Total $: <span class="addTotal"></span></div>
      </td>
    </tr>
  </tfoot>
  </table>