Javascript复选框填充输入并将不同的值传递给表单

Javascript checkboxes fill input AND pass a different value to a form

本文关键字：值传 表单 填充 复选框 输入 Javascript      更新时间：2023-09-26

对于一个游戏，我列出了基本上有犯罪的罪行，然后是两个复选框。 一个复选框用于是否犯罪，另一个复选框说明犯罪是否加重。 在表格中，有一个字段表示该人将在监狱服刑的总分钟数。 但是，我还需要将该犯罪的类别传递给表格，以便在提交时列出犯罪类别。 这是我到目前为止所拥有的。

标记：

<form action="process.php" method="post">
    Charges <input name="charges" type="text" id="charges" value=""><br />
    <input name="time" type="text" id="time" value=""> minutes<br />
    <input name="id" type="hidden" id="id" value="">
    <input type="submit" value="Process" />
</form>
<table>
    <tr>
        <td><input type="checkbox" value="15" id="a3a" class="sum" data-toggle="checkbox" /></td>
        <td><input type="checkbox" value='60' id="c3a" class="sum" data-toggle="checkbox" /></td>
        <td>Battery</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="0" id="a3b" class="sum" data-toggle="checkbox" /></td>
        <td><input type="checkbox" value='45' id="c3b" class="sum" data-toggle="checkbox" /></td>
        <td>Bank Robbery</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="10" id="a3c" class="sum" data-toggle="checkbox" /></td>
        <td><input type="checkbox" value='30' id="c3c" class="sum" data-toggle="checkbox" /></td>
        <td>Robbery</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="15" id="a3d" class="sum" data-toggle="checkbox" /></td>
        <td><input type="checkbox" value='60' id="c3d" class="sum" data-toggle="checkbox" /></td>
        <td>Kidnapping</td>
    </tr>
</table>

这是Javascript：

<script>
$(document).ready(function() {
    function updateSum() {
      var total = 0;
      $(".sum:checked").each(function(i, n) {total += parseInt($(n).val());})
      if(total<201){
        $("#time").val(total);
      }else{
        $("#time").val(200);
      }
    }
    // run the update on every checkbox change and on startup
    $("input.sum").change(updateSum);
    updateSum();    
})
</script>

所以一切都很好，如果你选中一个框，它会将总时间添加到时间字段中，最多 200 分钟（这是您可以在游戏中提供的最大值）。 但是，我还想将犯罪添加到指控字段中。 IE，如果您选中电池复选框 （#c3a），它会将"电池"添加到充电字段中，如果您选中加重框 （#a3a），那么它将添加"加重电池"。 对于您检查的每件事，它都会将该费用添加到费用字段（逗号分隔），然后对于您检查的所有内容，它会将类（当前位于 ID 插槽中）添加到隐藏的 id 字段中。 我想出了如何计算时间，但是如何使用单个复选框对将 3 个不同的变量发送到 3 个不同的输入字段？

顺便说一句，这些犯罪列表不是静态的，html实际上是使用数据库中的php写出来的，这就是为什么我使用递归javascript来遍历页面上的所有复选框而不是特定的ID。

假设您需要

保存每行的犯罪名称（如果选中复选框），则可以使用"费用"表单中的隐藏输入字段，并且每次选中或取消选中该框时，修改隐藏字段的值以仅包含选定的犯罪。

.HTML：

<form action="process.php" method="post">
  Charges
  <input name="charges" type="text" id="charges" value="">
  <br />
  <input name="time" type="text" id="time" value=""> minutes
  <br />
  <input name="id" type="hidden" id="id" value="" />
  <input type="submit" value="Process" />
</form>
<table>
  <tr>
    <td>
      <input type="checkbox" value="15" id="a3a" class="sum" data-toggle="checkbox" />
    </td>
    <td>
      <input type="checkbox" value='60' id="c3a" class="sum" data-toggle="checkbox" />
    </td>
    <td>Battery</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="0" id="a3b" class="sum" data-toggle="checkbox" />
    </td>
    <td>
      <input type="checkbox" value='45' id="c3b" class="sum" data-toggle="checkbox" />
    </td>
    <td>Bank Robbery</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="10" id="a3c" class="sum" data-toggle="checkbox" />
    </td>
    <td>
      <input type="checkbox" value='30' id="c3c" class="sum" data-toggle="checkbox" />
    </td>
    <td>Robbery</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="15" id="a3d" class="sum" data-toggle="checkbox" />
    </td>
    <td>
      <input type="checkbox" value='60' id="c3d" class="sum" data-toggle="checkbox" />
    </td>
    <td>Kidnapping</td>
  </tr>
</table>

JavaScript：

$(document).ready(function() {
  function updateSum() {
    var total = 0,
      crimes = [];
    $(".sum:checked").each(function(i, n) {
      total += parseInt($(n).val());
      // declare variables for DOM objects and name of crime
      var $cb = $(this),
        $row = $cb.parents('tr'),
        name = $row.find('td').last().text();
            // check that the crimes array doesn't already have the value; add if necessary
      if (crimes.filter(function(c, i, a) {
          return c == name;
        }).length == 0) {
        crimes.push(name);
      }
    });
    if (total < 201) {
      $("#time").val(total);
    } else {
      $("#time").val(200);
    }
    $('#charges').val(crimes.join(','));
  }
  // run the update on every checkbox change and on startup
  $("input.sum").change(updateSum);
  updateSum();
})

现场示例

相关文章：