2

使用 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>
4

1 回答 1

1

我假设您已经定义了.rowhighlightCSS 类？我将它粘贴到 jsFiddle 中，荧光笔立即为<input checked="checked">！

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

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

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

总体上的主要问题是检查输入是否检查了不正确的逻辑。有几种方法可以检查是否在 jQuery 中检查了输入并且您的测试没有工作。替换if ($clicked.is(':checked')) {为我在此演示中所做的修复了逻辑并突出显示了该行。

于 2011-06-25T06:54:00.053 回答