In an html table row, how can I toggle a checkbox whether an input box in the same row, but different column, has a value or none?

Question

So I'm creating a table with four columns and 60+ rows. Checkboxes are in col3, input boxes are in col4. What I'd like to happen is to be able to tick the checkbox ON if the input box has no value, and to tick it OFF if the input box has a value. I want this to happen automatically, also when the user deletes a previous input or types in a new one.

The problem with my code below is that it happens only once on window load, but when I remove the value from the input, the checkbox remains checked.

Would love to know how to improve this code and make it work according to my particular need.

Thank you so much in advance!!!

Here's what my table looks like. I'm doing this in a web app.

Here's my code:

<table id="our-edit-table">
    <thead>
      <tr>
        <th class="top-header">Field Name</th>
        <th class="top-header">Applicant’s Input</th>
        <th class="top-header">Check if OK</th>
        <th class="top-header">Comment</th>
      </tr>
    </thead>
    <tbody>
      <!------------------------SECTION 1---------------------------->
      <tr>
        <td colspan="4" class="subheader">ESTABLISHMENT DETAILS</td>
      </tr>
      <tr>
        <th>Control Number</th>
        <td id="form-cn">22G00001</td>
      </tr>
      <tr>
        <th>Email</th>
        <td>0</td>
        <td><input type="checkbox" class="check_val" id="form-email-check" checked></td>
        <td><input type="text" id="form-email-comment"></td>
      </tr>
      <tr>
        <th>Establishment Details</th>
        <td>1</td>
        <td><input type="checkbox" class="check_val" id="form-ed-check" checked></td>
        <td><input type="text" id="form-ed-comment"></td>
      </tr>
      <tr>
        <th>Lot/Block/Street/Phase/Subdivision/Building</th>
        <td>2</td>
        <td><input type="checkbox" class="check_val" id="form-address1-check" checked></td>
        <td><input type="text" id="form-address1-comment"></td>
      </tr>
      <tr>
        <th>Barangay, Municipality, Province  Zip Code - c/o code</th>
        <td>3</td>
        <td><input type="checkbox" class="check_val" id="form-address2-check" checked></td>
        <td><input type="text" id="form-address2-comment"></td>
      </tr>
    <tbody>
 </table>

function uncheckTheBox(){
  var table = document.getElementById('our-edit-table');
  var rows = table.getElementsByTagName('tr');

  for(i = 0; i < rows.length; i++) {
      var currentRow = table.rows[i]; //current selected row

      var createClickHandler =
        function(row) {
          return function() {
            var inputbox = row.querySelector('input[type=text]');
            var checkbox = row.querySelector('.check_val');

            if(inputbox.value !== ''){
              //console.log(inputbox.value)
              checkbox.removeAttribute('checked');
            } else if(inputbox.value === '') {
              checkbox.checked = true;
            } //closes if
          }; //closes return function
        }; //closes function

     currentRow.onkeyup = createClickHandler(currentRow); 
  } //closes for

} //closes function

window.onload = uncheckTheBox();

Answer 1

Use input or change event as which behavior you want.

function uncheckTheBox(){
  var table = document.getElementById('our-edit-table');
  var rows = table.getElementsByTagName('tr');

  var createClickHandler =
    function(inputbox, checkbox) {
      if(inputbox.value !== ''){
        //console.log(inputbox.value)
        checkbox.checked = false;
      } else {
        checkbox.checked = true;
      } //closes if
    }; //closes function

  for(i = 0; i < rows.length; i++) {
    var row = table.rows[i]; //current selected row
    const inputbox = row.querySelector('input[type=text]');
    const checkbox = row.querySelector('.check_val');
    if (!inputbox || !checkbox) {
      continue;
    }
    
    inputbox.addEventListener('input', function() {
      createClickHandler(inputbox, checkbox);
    });

  } //closes for

} //closes function

window.onload = uncheckTheBox();

<table id="our-edit-table">
    <thead>
      <tr>
        <th class="top-header">Field Name</th>
        <th class="top-header">Applicant’s Input</th>
        <th class="top-header">Check if OK</th>
        <th class="top-header">Comment</th>
      </tr>
    </thead>
    <tbody>
      <!------------------------SECTION 1---------------------------->
      <tr>
        <td colspan="4" class="subheader">ESTABLISHMENT DETAILS</td>
      </tr>
      <tr>
        <th>Control Number</th>
        <td id="form-cn">22G00001</td>
      </tr>
      <tr>
        <th>Email</th>
        <td>0</td>
        <td><input type="checkbox" class="check_val" id="form-email-check" checked></td>
        <td><input type="text" id="form-email-comment"></td>
      </tr>
      <tr>
        <th>Establishment Details</th>
        <td>1</td>
        <td><input type="checkbox" class="check_val" id="form-ed-check" checked></td>
        <td><input type="text" id="form-ed-comment"></td>
      </tr>
      <tr>
        <th>Lot/Block/Street/Phase/Subdivision/Building</th>
        <td>2</td>
        <td><input type="checkbox" class="check_val" id="form-address1-check" checked></td>
        <td><input type="text" id="form-address1-comment"></td>
      </tr>
      <tr>
        <th>Barangay, Municipality, Province  Zip Code - c/o code</th>
        <td>3</td>
        <td><input type="checkbox" class="check_val" id="form-address2-check" checked></td>
        <td><input type="text" id="form-address2-comment"></td>
      </tr>
    <tbody>
 </table>