Question

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

标记：

<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），它会添加＆＃34;电池＆＃34;到收费领域，如果你检查加重的盒子（＃a3a）那么它将添加＆＃34;加重电池＆＃34;代替。对于您检查的每件事情，它会将该费用添加到费用字段（逗号分隔），然后对于您检查的所有内容，它会将类（当前位于ID槽中）添加到隐藏的ID字段。我想出了如何计算时间，但如何使用一个复选框对3个不同的输入字段发送3个不同的变量？

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

Answer 1

如果选中了复选框，则假设您需要保存每行的犯罪名称，您可以使用表格中隐藏的输入字段来收取＆＃34; charge＆＃34;每次选中或取消选中一个方框时，修改隐藏字段的值只包括选定的犯罪。

<强> 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();
})

<强> Live Example

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

1 个答案: