2

jquery1.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 に答える