如何根据选中的复选框选择多个表格数据？

Question

有两排一个数据表，如下面的图像

当2位用户点击它应该强调的是仅在该列TD。我使用jQuery实现了一个复选框选择，但是当多个复选框选择像2和4时，它应该突出显示TD。

http://jsbin.com/exazoh/edit#preview单值突出显示的工作示例。

代码：http://jsbin.com/exazoh/2/edit

Answer 1

尝试以下功能：

jQuery(function() { 
    // on change of an input with a name starting with "bit-select"... 
    jQuery('input[name^="bit-select"]').change(function(){ 
     var checked = this.checked, 
      val = this.value, 
      column = $(this).closest("th").index() + 1; 

     // for each td in the current column 
     jQuery("#tableData tr.data td:nth-child(" + 
          column + ")").each(function() { 
      var $td = $(this); 
      // does the current td match the checkbox? 
      if ($td.text() == val) { 
      if (checked) 
       $td.addClass("jquery-colorBG-highLight"); 
      else 
       $td.removeClass("jquery-colorBG-highLight"); 
      } 
     }); 
    }); 
}); 

我不得不把value属性添加到第二组复选框。

工作演示：http://jsbin.com/exazoh/4/edit#preview

还是短的版本，因为我注意到你用.filter()最初：

jQuery(function() { 
    jQuery('input[name^="bit-select"]').change(function(){ 
    var method = this.checked ? "addClass" : "removeClass", 
     val = this.value; 

    jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")") 
     .filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight"); 
    }); 
}); 

演示：http://jsbin.com/exazoh/5/edit