使用Jquery根据Checkbox ID选中，取消选中每行表中的复选框

Posted 2023-05-08

【中文标题】使用Jquery根据Checkbox ID选中，取消选中每行表中的复选框

【英文标题】：Check, unckeck checkbox in each row of table based on Checkbox ID using Jquery

【发布时间】：2021-07-28 13:04:30

【问题描述】：

我正在尝试检查，取消选中基于 id 的复选框。 我在表格中有两列。

    *current  paper * arrear paper

如果当前选择了一张纸，则该纸应从拖纸中禁用 如果在后列中选择了该特定纸张，则应从当前纸张中禁用该纸张。

我的问题是，如果在当前列中选择了该特定纸张，我可以禁用 欠费纸张，但如果我取消选中当前列中选择的纸张，则不会启用该纸张后列。 同样的问题也出现在SelectAll Checkbox 函数中 如果我在 P1 论文中单击 SelectAll，当前列我想禁用 P1 欠费论文列中的该列

谁能指导我克服这个问题。 提前致谢

我的小提琴：Demo Here

片段：

$('input[type="checkbox"]').change(function() 
  $('input:checkbox:checked').each(function() 
    var el = $(this).parents('tr')[0];
    if ($(this).is(":checked")) 
      var dis = 'A-' + $(this).attr("id");
      var value = $(this).closest('tr').find('#' + dis);
      value.prop('disabled', true);
    
  )
);
$('input[type="checkbox"]').change(function() 
  $('input:checkbox:checked').each(function() 
    //  var el = $(this).parents('tr')[0];
    if ($(this).is(":not(:checked)")) 
      var dis = 'A-' + $(this).attr("id");
      var value = $(this).closest('tr').find('#' + dis);
      value.prop('disabled', false);
    
  )
);

function SelectAll(obj) 
  // find the index of column
  var table = $(obj).closest('table');
  var th_s = table.find('th');
  var current_th = $(obj).closest('th');
  var columnIndex = th_s.index(current_th) - 1;

  console.log('The Column is = ' + columnIndex);

  // select all checkboxes from the same column index
  table.find('td:nth-child(' + (columnIndex) + ') input').prop("checked", obj.checked).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
  <tr>
    <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
    <th style="padding:2.5px;" colspan="3">Arrear Paper</th>
  </tr>
  <tr>
    <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P3 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P3<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>
  </tr>
</table>

基本要求：如果学生在当前列中选择了一篇特定论文，则必须从后面的列中禁用特定论文， 连续会有两篇相同的论文，一次只能选择一篇。

【问题讨论】：

你有很多相同的 id 并且不是很好..

无用评论：“paper”这个词在问题中出现了超过 12 次，但在代码中只出现了两次！

@Frenchy 在我的原始代码中，这个 html 表在循环内并且有多行。

@Wimanicesir 我试图清楚地解释我的问题。

你可以修改你的html吗？

【参考方案1】：

我对你的 html 做了一些修改，我推迟了 onclick 操作，而是使用 id，我使用每个复选框的索引，

所以主复选框的索引从 0 到 5，

复选框的第一行索引从 6 到 11，

最后一行从 12 到 17。

我在一个数组中设置了不同的值，并捕获了单击的复选框的索引：

let sel = $('input[type="checkbox"]');
let ar = [];
for (let i = 0; i < 6; i++) 
  //if you want to add new line of checkbox ar.push([i + 6, i + 12, i + 18]);
  ar.push([i + 6, i + 12]);

//[[6, 12], [7, 13], [8, 14], [9, 15], [10, 16], [11, 17]]
// index for checkbox 0 is 6,12 and so on   
//console.log("checkbox", ar);

sel.change(function() 
  let lastcheckbox = sel.index($(this));
  let ischecked = sel.eq(lastcheckbox).is(":checked");
  //sel.prop("disabled", false);

  if (lastcheckbox < 6)  //main checkbox clicked
    let alt = lastcheckbox < 3 ? lastcheckbox + 3 : lastcheckbox - 3;
    ar[lastcheckbox].forEach( (item, i) => sel.eq(item).prop("checked", ischecked));

    sel.eq(alt).prop("disabled", ischecked);
    ar[alt].forEach( (item, i) => sel.eq(item).prop("disabled", ischecked));    

return;
  

  //so its a secondary checkbox clicked
  ar.forEach((item, idx) => 
    if (item.includes(lastcheckbox)) //find the main index of secondary checkbox
      let index = item.indexOf(lastcheckbox);
      let alt = idx < 3 ? idx + 3 : idx - 3;
      let one = item.some((idx) => sel.eq(idx).is(":checked"));
      let both = item.every((idx) => sel.eq(idx).is(":checked"));
      if (both)  //both secondary checkbox checked
        sel.eq(idx).prop("checked", true);
        sel.eq(alt).prop("disabled", true);
        ar[alt].map((i) => sel.eq(i).prop("disabled", true));
       else if (!one && !both)  //no secondary checkbox checked
        sel.eq(idx).prop("checked", false);
        sel.eq(alt).prop("disabled", false);
        ar[alt].map((i) => sel.eq(i).prop("disabled", false));
       else if (one && !both) 
        sel.eq(idx).prop("checked", false);
        sel.eq(alt).prop("disabled", true);
        sel.eq(lastcheckbox).prop("checked", ischecked);
        sel.eq(ar[alt][index]).prop("disabled", ischecked);
      
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
  <tr>
    <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
    <th style="padding:2.5px;" colspan="3">Arrear Paper</th>

  </tr>
  <tr>
    <th>P1<br /> <input type="checkbox" id="selectAll" /></th>
    <th>P2 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P3 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P1<br /> <input type="checkbox" id="selectAll" /></th>
    <th>P2 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P3<br /> <input type="checkbox" id="selectAll" /></th>
  </tr>
  <tr>


    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>




    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>

  </tr>
  <tr>


    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>




    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>

  </tr>
</table>

【讨论】：

非常感谢先生。让我用我的代码检查一下并更新

你已经使用了 ar.push([i + 6, i + 12]);所以它只适用于两行？ （即最多 12 个索引）

还有什么问题？如果要加行，就得修改程序，真的很简单..要加行吗？

是的。这非常有效。非常感谢您的帮助。

【参考方案2】：

您有许多相似的复选框 ID，正如您所提到的，由于某种原因您不想更改它们，所以我们可以通过避免复选框上的 for 循环和复选框更改时调用函数来做到这一点。

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
<tr>
 <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
        <th style="padding:2.5px;" colspan="3">Arrear Paper</th>
     
       </tr>
       <tr>
          <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
     <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
      <th>P3 <br/><input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
       <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
     <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
      <th>P3<br/> <input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
    </tr>
  <tr >
    
    
      <td><input type="checkbox" name="checkbox" id="P1" class="sum" data-type="CurrentPaper" value="550" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>



    
     <td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper"></td>
      
    </tr>
        <tr >
    
    
      <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-type="CurrentPaper" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>



    
     <td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
      
    </tr>
    </table>
    
    function checkuncheck(element)
 var dis = $(element).attr("id"); 
 if($(element).attr("data-type").toLowerCase()=="currentpaper")
            dis='A-'+$(element).attr("id");

 
 else
 dis= dis.split("-")[1];
  
        var el = $(element).parents('tr')[0];
        
      if($(element).is(":checked"))      
           var value= $(element).closest('tr').find('#'+dis);
     value.prop('disabled', true);
       
     else
     
           $(element).closest('tr').find('#'+dis)
             .prop('disabled', false);
     

你可以在这个小提琴中找到代码： https://jsfiddle.net/472s8cvb/

根据改动，尝试实现全选功能

【讨论】：

非常感谢。我会试试这个并更新