javascript - jQuery 选择两个且仅两个复选框

Question

我正在研究一个比较表中两行的解决方案。最基本的表结构如下图所示:

<table id="historyTable">
   <tr>
     <td><input type="checkbox" id="row_0" /></td>
     <td>same</td>
     <td>r0c2</td>
     <td>r0c3</td>
     <td>r0c4</td>
     <td>r0c5</td>
   </tr>
   <tr>
     <td><input type="checkbox" id="row_1" /></td>
      <td>same</td>
      <td>same</td>
      <td>r1c3-different</td>
      <td>same</td>
      <td>same</td>
   </tr>
   <tr>
     <td><input type="checkbox" id="row_2" /></td>
      <td>same</td>
      <td>same</td>
      <td>r2c3</td>
      <td>same</td>
      <td>same</td>
   </tr>
</table>

这将从数据库中填充，因此，显然会有 n 行，但每行都会使用示例中硬编码的命名约定向 DOM 添加一个复选框如上所述。

我认为“困难的部分”将突出显示不同的单元格值 - 事实证明，这很容易。困难的部分是使用复选框来确保选中两个且仅选中两个。

我尝试对 .each("td").is(":checked").id 使用各种方法，这很好地为我获取了 id选中的复选框的属性，但我不知道如何将选择限制为两个选择。

这个想法是，一旦选中第二个复选框，就会触发一个函数来突出显示所选行中的差异。

有人可以插入我朝着实现预期结果的方向前进吗？

Answer 1

请参阅Demo这里

    <table id="historyTable">
   <tr>
     <td><input type="checkbox" id="row_0" /></td>
     <td>same</td>
     <td>r0c2</td>
     <td>r0c3</td>
     <td>r0c4</td>
     <td>r0c5</td>
   </tr>
   <tr>
     <td><input type="checkbox" id="row_1" /></td>
      <td>same</td>
      <td>same</td>
      <td>r1c3-different</td>
      <td>same</td>
      <td>same</td>
   </tr>
   <tr>
     <td><input type="checkbox" id="row_2" /></td>
      <td>same</td>
      <td>same</td>
      <td>r2c3</td>
      <td>same</td>
      <td>same</td>
   </tr>
  <tr>
     <td><input type="checkbox" id="row_3" /></td>
      <td>same</td>
      <td>same</td>
      <td>r2c3</td>
      <td>same</td>
      <td>same</td>
   </tr>
  <tr>
     <td><input type="checkbox" id="row_4" /></td>
      <td>same</td>
      <td>same</td>
      <td>r2c3</td>
      <td>same</td>
      <td>same</td>
   </tr>
</table>
<p id='output'></p>


    var inputs=document.getElementsByTagName('INPUT');
var limit=2;
var count=0;
for(input of inputs)
 {
    input.addEventListener("change",function(e){
      restrictLimit(e);
    });
 }
function restrictLimit(e)
{
  if(e.target.checked==true)
  {
    count++;
    if(count>limit)
      {
        e.target.checked=false;
        count=limit;
      }
  }
    else
    {
      count--;  
    }
  document.getElementById('output').innerHTML="Checkbox Selected:"+count;
}