jQuery set value of each previous sibling of each ticked checkbox upon submit

Question

I have been searching solutions for this and found that the most effective way is through a hacky workaround like this, but none of them has posted a working way to catching every tick and untick box for a dynamic input row using a lot of checkbox arrays.

I looked around and saw a script way -- let hidden inputs be the POST source and change value according to their adjacent checkbox upon submit. However the jquery doesn't seem to work -- it always submits a value of 0 (whatever the value attribute inside hidden inputs.

$(document).ready(function() {
  $('#frm').submit(function() {
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->

Answer 1

Your code works

I will delete this answer once we have discussed it

I have changed hidden to text and added preventDefault to show it works

$(document).ready(function() {
  $('#frm').on("submit",function(e) {
    e.preventDefault(); //while testing
    $('input[type="checkbox"]:checked').prev('.checkboxHandler').val(1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="checkboxHandler" name="isHeadOfFamily[]" value="0">
<td><input type="checkbox"></td>
<input type="text" class="checkboxHandler" name="isEmployed[]" value="0">
<td><input type="checkbox"></td>
<! and so on-->
<input type="submit"/>
</form>

Answer 2

Consider the following example.

$(function() {
  function getTableData(table) {
    var results = [];
    $("tbody > tr", table).each(function(i, row) {
      results.push({
        id: $(row).data("uid"),
        isHeadofHousehold: $("input", row).eq(0).prop("checked"),
        isEmployed: $("input", row).eq(1).prop("checked")
      });
    });
    return results;
  }
  $('#frm').on("submit", function(e) {
    e.preventDefault();
    var formData = getTableData($("#myTable"));
    console.log(formData);
  });
});

.checkbox {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Head of Household</th>
        <th>Employed</th>
      </tr>
    </thead>
    <tbody>
      <tr data-uid="1001">
        <td>Homer Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]" checked></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]" checked></td>
      </tr>
      <tr data-uid="1002">
        <td>Marge Simpson</td>
        <td class="checkbox"><input type="checkbox" name="isHeadOfFamily[]"></td>
        <td class="checkbox"><input type="checkbox" name="isEmployed[]"></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Save" />
</form>

You now have:

[
  {
    "id": 1001,
    "isHeadofHousehold": true,
    "isEmployed": true
  },
  {
    "id": 1002,
    "isHeadofHousehold": false,
    "isEmployed": false
  }
]

You can then use AJAX to POST this data back to PHP so the changes can be saved to SQL. As mentioned, you can switch them to 1 and 0 respectively if you choose.

Update

Returning to OP's desired method, consider the following.

$(function() {
  $("#frm").on("change", "input[type='checkbox']", function(event) {
    $(this).prev(".checkboxHandler").val($(this).prop("checked") ? 1 : 0);
  });
});

.checkbox {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="frm">
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Head of Household</th>
        <th>Employed</th>
      </tr>
    </thead>
    <tbody>
      <tr data-uid="1001">
        <td>Homer Simpson</td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="1" />
          <input type="checkbox" checked />
        </td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isEmployed[]" value="1" />
          <input type="checkbox" checked />
        </td>
      </tr>
      <tr data-uid="1002">
        <td>Marge Simpson</td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isHeadOfFamily[]" value="0" />
          <input type="checkbox" />
        </td>
        <td class="checkbox">
          <input type="hidden" class="checkboxHandler" name="isEmployed[]" value="0" />
          <input type="checkbox" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="submit" value="Save" />
</form>

This updates the hidden text box value when a User makes a change.

If you are insistent on using the original code, use the following:

$('input[type="checkbox"]:checked').prevAll('.checkboxHandler').val(1);

I strongly advise not using this, as it's a one way logic and if the User unchecks a box before the form is submitted, the change will not be captured.

Update 2

Based on the Top rated answer here, you could also do this:

<td>
  <input type="hidden" name="isHeadOfFamily[]" value="0">
  <input type="checkbox" name="isHeadOfFamily[]" value="1">
</td>
<td>
  <input type="hidden" name="isEmployed[]" value="0">
  <input type="checkbox" name="isEmployed[]" value="1">
</td>

The only caveat is that if the User checks a box, both values would get sent. So as suggested, disable the hidden upon submit if unchecked.

$("#frm").submit(function(){
  $('input[type="checkbox"]:checked').prevAll().prop("disabled", true);
});