在html表格行中，如何切換復選框是否同一行但不同列中的輸入框有值或沒有值？

所以我正在創建一個包含四列和 60 多行的表。復選框在 col3 中，輸入框在 col4 中。我想要發生的是能夠在輸入框沒有值的情況下勾選復選框，如果輸入框有值則將其勾選。我希望這自動發生，當用戶洗掉以前的輸入或輸入新的輸入時也是如此。

我下面的代碼的問題是它只在視窗加載時發生一次，但是當我從輸入中洗掉值時，復選框仍然處于選中狀態。

很想知道如何改進此代碼并使其根據我的特殊需要作業。

提前非常感謝你！！！

這是我的桌子的樣子。我在一個網路應用程式中這樣做。

這是我的代碼：

<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();

uj5u.com熱心網友回復：

使用input或change事件作為您想要的行為。

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>

標籤：javascript功能谷歌应用脚​​本html表网络应用

上一篇：從Angular/Javascript呼叫AppScript函式

下一篇：GoogleApps腳本-在定位作業表中重復的單元格時使用表單回應值并洗掉與該值匹配的行