脚本在表中每一行的单元格中均不起作用

Question

I have a row/column table with switches, unfortunately the script can't find

the switches in the new column, basically after the end of the cell .

I tried modifying some of the scripts that were posted in the similar posts but none of them worked. I am pretty much stuck at this point.

Here's my HTML and the java script that does the calculation for the switches:

    <div style="margin-left:-178px">
      <form action="file:///Users/jason/Desktop/Temp/JACK010.txt" target="_blank">
        <font color="white">JACK010</font>
        <input type="submit" value="CHECK ADDRESS">
          <div id="checkbox-container">
            <div style="margin-left:178px">
              <div style="margin-top:-18px">
                <div>
                  <input type="checkbox" id="option170">
                </div>
      </form>
  </td>
</tr>

I have a lot of those, within the cell, and finally the JavaScript:

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
$checkboxes.on("change", function() {
  $checkboxes.each(function() {
    checkboxValues[this.id] = this.checked;
  });
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

Thank you!

Answer 1

Using only $("#checkbox-container :checkbox"); results in only reading the first container with the ID checkbox-container .

If you want to fetch all checkboxes, you should either change the checkbox-container to a class or use the following selector within jQuery:

var $checkboxes = $("div#checkbox-container :checkbox");

It will then loop through all the checkboxes, even if an ID is used instead of a class.

Keep in mind, that the ID of your checkbox ( <input type="checkbox" id="option170"> ) must however change in order to get valid data and all the values you want.

Side note: Please keep your HTML code clean and valid.