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添加一个复选框。上面的例子。

我认为＆＃34;难点＆＃34;将要突出显示不同的单元格值 - 事实证明，这很容易。困难的部分是使用复选框来确保选择两个，而且只选择两个。

我尝试使用.each("td").is(":checked").id上的各种内容，它很好地为我提供了已选中复选框的id属性，但我不知道如何将选择限制为两个选项。< / p>

这个想法是在选中第二个复选框后，会触发一个功能以突出显示所选行中的差异。

请有人请我指点一下，以达到预期的效果吗？

Answer 1

您无法在.is(":checked")上使用<td>，必须在<td>内的复选框上进行操作。并且.each()需要在每个元素上执行函数参数。

但简单的方法是选中所有选中的复选框，并使用.length计算它们。

if ($("td :checkbox:checked").length == 2) {
    // do stuff
} else {
    alert("Check exactly 2 rows");
}

Answer 2

请参阅此处的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;
}

jQuery选择两个且只有两个复选框

2 个答案: