選中/取消選中不同列中的相應復選框-有解無憂

我有 2 列“選擇”和“超級”，這些列有復選框，用戶可以選擇或取消選擇。我正在尋找的是一個 jQuery 解決方案：

如果選擇了 B 列（超級）中的任何復選框，則應選中 A 列（選擇）中的相應復選框
如果未選中 A 列（選擇）中的任何復選框，則應取消選中 B 列（超級）中的相應復選框

我擁有的 HTML 代碼是：

<td>
    <input type="checkbox" id="select1" checked="checked" class="select-checkbox">
</td>
<td><input type="checkbox" id="super1" class="super-checkbox">
</td>
</tr>
<tr>
    <td><input type="checkbox" id="select2" class="select-checkbox">
    </td>
    <td><input type="checkbox" id="super2" class="super-checkbox">
    </td>
</tr>
<tr>
    <td><input type="checkbox" id="select3" checked="checked" class="select-checkbox">
    </td>
    <td><input type="checkbox" id="super3" checked="checked" class="super-checkbox">
    </td>
</tr>
<tr>
    <td><input type="checkbox" id="select4" checked="checked" class="select-checkbox">
    </td>
    <td><input type="checkbox" id="super4" checked="checked" class="super-checkbox">
    </td>
</tr>```

uj5u.com熱心網友回復：

首先，您需要為所有選擇復選框添加一個公共類，并為所有超級復選框添加一個公共類

$(function(){
  $('.super-checkbox').change(function(e){
    const chk = $(this);
    if(chk.is(':checked')){
      //Super is checked
      // get the closest tr
      const tr = chk.closest('tr');
      //find the select checkbox, under this tr
      const selectChk = tr.find('.select-checkbox');
      //Check this select checkbox
      selectChk.prop('checked',true);
    }
  });
  
  $('.select-checkbox').change(function(e){
    const chk = $(this);
    if(!chk.is(':checked')){
      //Select is not checked
      // get the closest tr
      const tr = chk.closest('tr');
      //find the super checkbox, under this tr
      const selectChk = tr.find('.super-checkbox');
      //un-Check this select checkbox
      selectChk.prop('checked', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
    <input type="checkbox" id="select1" checked="checked" class="select-checkbox">
</td>
<td><input type="checkbox" id="super1" class="super-checkbox">
</td>
</tr>
<tr>
    <td><input type="checkbox" id="select2" class="select-checkbox">
    </td>
    <td><input type="checkbox" id="super2" class="super-checkbox hrpda-interview-super-checkbox">
    </td>
</tr>
<tr>
    <td><input type="checkbox" id="select3" checked="checked" class="select-checkbox hrpda-interview-select-checkbox">
    </td>
    <td><input type="checkbox" id="super3" checked="checked" class="super-checkbox">
    </td>
</tr>
<tr>
    <td><input type="checkbox" id="select4" checked="checked" class="select-checkbox">
    </td>
    <td><input type="checkbox" id="super4" checked="checked" class="super-checkbox">
    </td>
</tr>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439729.html

標籤：html jQuery 复选框

上一篇：如何突出顯示列中的所有文本？

下一篇：頁面加載時如何在ReactJS中洗掉className？