如何根据所选复选框选择多个表数据？

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