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的Ctrl + \方法执行此操作。

jQuery Documentation

获取当前匹配元素集中每个元素的祖先，可以选择使用选择器进行过滤。 Mat result = new Mat(width, height, DepthType.Cv32F, 1);方法类似于.parent()方法。

运行代码

.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);
});

如何将输入值分配给复选框值，然后计算核对总数？

1 个答案: