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

Question

For a game, I have crimes listed where there is basically the crimes, then two checkboxes. One checkbox is for if the crime was committed, the other checkbox tells if the crime was aggravated or not. In the form, there is a field that says the total number of minutes the person will serve in jail. BUT, I also need to pass the class of that crime to the form so that when it's submitted it lists the class of the crime. Here's what I have so far.

The Markup:

<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>

Here is the 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>

So all good there, if you check a box it adds the total time to the time field up to 200 minutes (that's the max you can serve in game). HOWEVER, I also want to add the crime to the charges field. IE, if you check the battery checkbox (#c3a) it adds "Battery" to the charges field, if you check the aggravated box (#a3a) then it will add "Aggravated Battery" instead. For each thing you check it will add that charge to the charges field (comma delimited) and then also for everything you check it will add the class (which currently sits in the ID slot) to the hidden id field. I figured out how to tally the time, but how do I send 3 different variables to 3 different inputs fields using a single checkbox pair?

BTW, these crime lists are not static, the html is actually written out using php from a database, that's why I was using a recursive javascript that went through all the checkboxes on the page rather than specific IDs.

Answer 1

Assuming you need to save the crime names from each row if a checkbox is checked, you can use the hidden input field in the form for "charges" and each time a box is checked or unchecked, modify the value of the hidden field to only include the selected crimes.

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