How to get this oninput JavaScript to check the checkbox by row of a table

Question

I want to have a webpage with a long table full of input values. I want to get a checkbox checked when an individual row input value is modified. I have not been able to get the JavaScript part to work.

The below is my try

<!DOCTYPE html>
<html>
<head>
<style>table {border: 1px solid black;} </style>
</head>
<body>

<div class="container">

      <form action="" method='POST'>
      <table id="table" class="table">
          <thead>
              <tr>
                  <th data-type="number">No.</th>
                  <th>First name</th>
                  <th>Modified <br>"to be hidden"</th>
              </tr>
          </thead>
              <tr>
                  <td><input name="no[]" value="1" oninput="mod(this)"></td>
                  <td><input name="f[]" value="Andrea" oninput="mod(this)"></td>
                  <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
              </tr>
              <tr>
                  <td><input name="no[]" value="2" oninput="mod(this)"></td>
                  <td><input name="f[]" value="Peter" oninput="mod(this)"></td>
                  <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
              </tr>
              <tr>
                  <td><input name="no[]" value="3" oninput="mod(this)"></td>
                  <td><input name="f[]" value="Sarah" oninput="mod(this)"></td>
                  <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
              </tr>

      </table>
    </form>
  </div>

  <script>
    function mod(r) {
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("modcheck").modifed(i).checked = true;
    }
  </script> 

</body>
</html>

You've to rethink the logic. Ids within the document must be unique. Take a look at [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) to get rid of the inline event listeners, [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll) can be used to collect the checked inputs. — Teemu, Jun 30 '22 at 05:56

score 1 · Accepted Answer · answered Jun 30 '22 at 06:03

You can iterate over each row, and add an oninput function to check the corresponding checkbox when input textbox is modified.

let rows = document.querySelectorAll("tr");

rows.forEach(row=>{
  row.querySelectorAll("input:not(#modcheck)").forEach(input=>{
    input.oninput = (e)=>{
      row.querySelector("#modcheck").checked = true;
    }
  })
})

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <div class="container">

    <form action="" method='POST'>
      <table id="table" class="table">
        <thead>
          <tr>
            <th data-type="number">No.</th>
            <th>First name</th>
            <th>Modified <br>"to be hidden"</th>
          </tr>
        </thead>
        <tr>
          <td><input name="no[]" value="1"></td>
          <td><input name="f[]" value="Andrea"></td>
          <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
        </tr>
        <tr>
          <td><input name="no[]" value="2"></td>
          <td><input name="f[]" value="Peter"></td>
          <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
        </tr>
        <tr>
          <td><input name="no[]" value="3"></td>
          <td><input name="f[]" value="Sarah"></td>
          <td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
        </tr>

      </table>
    </form>
  </div>

</body>

</html>

How to get this oninput JavaScript to check the checkbox by row of a table

1 Answers1