Question

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

Answer 1

我假设你已经定义了.rowhighlight CSS类？我将它粘贴到jsFiddle中，荧光笔直接用于<input checked="checked">！

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

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

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

整体上的主要问题是检查输入是否被检查逻辑是不正确的。有few ways to check if an input is checked in jQuery并且您的测试无效。正如我在this demo中所做的那样，用if ($clicked.is(':checked')) {替换了逻辑，突出显示了行。

jquery最接近的tr没有被选中

1 个答案: