jQuery最接近的tr未被选中

问题描述

| 使用jQuery 1.6.1 当复选框被选中或未选中时，我想更改行的背景色。我最近的tr在这里没有被选中。我有一个要更改为插件的工作代码，并且此问题仅在插件中发生。 呼叫：

$(\".tableHighlightSelector tr td input[type=\'checkBox\']\").checkBoxTableHighlighter();

插件代码：

//checkBox row Highlighter
jQuery.fn.checkBoxTableHighlighter = function(options){
var defaults = {  
    highlightClass: \"rowhighlight\"
};  
var options = $.extend(defaults,options);  

var highlight = {
    RemoveHighlightForAllNotChecked: function ($item) {
        $item.filter(\':not(:checked)\').closest(\"tr\").removeClass(defaults.highlightClass);
    },CheckBoxRowSelect: function (e,$clicked) {
        if ($clicked.attr(\"checked\") == true) {
            $clicked.closest(\"tr\").addClass(defaults.highlightClass);
            highlight.RemoveHighlightForAllNotChecked($(\'input[name=\' + $clicked.attr(\"name\") + \']\')); //when we make checkBox behave like a radio button
        }
        else
            $clicked.closest(\"tr\").removeClass(defaults.highlightClass);
    }
}
return this.each(function() {  
    var $obj = $(this);
    var jsObj = this;   
    //onload
    highlight.CheckBoxRowSelect(\'\',$obj);     
    //click
    $obj.click(function(){
        highlight.CheckBoxRowSelect(e,$(this));
    }); 
    //keyup
    $obj.keyup(function(){
        highlight.CheckBoxRowSelect(e,$(this));
    });         
});
};

HTML：

<table width=\"300px\" class=\"tableHighlightSelector\">
            <tr>
                <td colspan=\"2\">Group 2</td>
            </tr>
            <tr>
                <td width=\"20px\"><input type=\"checkBox\" name=\"group2\" value=\"a\" checked=\"checked\" /></td>
                <td>A</td>
            </tr>
            <tr>
                <td width=\"20px\"><input type=\"checkBox\" name=\"group2\" value=\"b\" /></td>
                <td>B</td>
            </tr>
            <tr>
                <td width=\"20px\"><input type=\"checkBox\" name=\"group2\" value=\"c\" /></td>
                <td>C</td>
            </tr>
            <tr>
                <td width=\"20px\"><input type=\"checkBox\" name=\"group2\" value=\"d\" /></td>
                <td>D</td>
            </tr>
        </table>

    

解决方法

        我假设您已经定义了

.rowhighlight

CSS类？我将其粘贴到jsFiddle中，荧光笔立即用

<input checked=\"checked\">

工作！ Chrome控制台会立即报告的点击处理程序中缺少一些事件变量。

$obj.click(function(e /* added e here */) {
    highlight.CheckBoxRowSelect(e,$(this));
});

我认为这是一个复制粘贴错误，否则您将永远无法进入主

CheckBoxRowSelect

函数。 总的来说，主要问题是检查输入是否被检查为逻辑错误。有几种方法可以检查是否在jQuery中检查了输入并且您的测试无法正常工作。像我在本演示中一样，替换为ѭ7可以修复逻辑并突出显示该行。