选中/取消选中不同列中的相应复选框

Question

我有 2 列 'Select' 和 'Super' 这些列有复选框，并且可以由用户 selected 或取消 selected。我正在寻找的是 jQuery 的解决方案：

如果 B 列（超级）中的任何复选框被 selected 那么应选中 A 列 (select) 中的相应复选框
如果 A 列 (select) 中的任何复选框未selected，则应取消选中 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>```

Answer 1

首先你需要为所有select复选框添加一个公共class，为所有超级复选框

添加一个公共class

$(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>

选中/取消选中不同列中的相应复选框

Check / Uncheck corresponding checkboxes in different columns

html

checkbox

jquery