Question

当用户检查<table>中的任何复选框时，我正在尝试突出显示整行。我正在使用jquery的“dataTable”插件。

我能够按照我想要的方式工作。目前，具有“复选框”的最右边或最后一列将选择器应用于它。因此，当我选中一个方框时（“th”中的check_all方框或“td”中的复选框，它会正确地突出显示该行。但如果我检查第2列到最后一列中的任何复选框，则没有任何反应。它的行为类似于选择器没有得到应用。

我不明白我的jQuery有什么问题。

这是我的jquery：

//SELECTED ROW HIGHLIGHT
$("table.datatable_ss").delegate("input:checkbox", "click", function( e ) {
    //Search the body for any checked input boxes and highlight the row
    $("table.datatable_ss tbody [type=checkbox]").each(function(){
            if ( $(this).is(":checked") ) {
                $(this).closest("tr").addClass("row_selected");
            }
            else {
                $(this).closest("tr").removeClass("row_selected");
            }
    });
});

继承人html：

<table class="datatable_ss">
    <thead>
         <tr>
        <th>Suite</th>
        <th>Location</th>
        <th>Status</th>
        <th>Date</th>
        <th><input type="checkbox" name="_arch_chbx_checkall"></th>
        <th><input type="checkbox" name="_del_chbx_checkall" ></th>
         </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class=" sorting_1">Suite 301</td>
            <td>Mainstreet Plaza</td>
            <td>Active</td>
            <td>06/01/2012</td>
            <td>
                <input type="checkbox" class="input_editible" name="_arch_chbx" id="9_L_arch_chbx">
            </td>
            <td>
                <input type="checkbox" class="input_editible" name="_delete_chbx" id="9_L_del_chbx">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

通过删除复选框的循环，我得到了亮点。我认为最好将select-all复选框事件连接和row-checkbox事件连接分开。

// this will wire up the click for each individual row
$("table.datatable_ss tbody").delegate("input:checkbox", "click", function( e ) {

    //Search the body for any checked input boxes and highlight the row
    //$("table.datatable_ss tbody [type=checkbox]").each(function(){
            if ( $(this).is(":checked") ) 
            {
                $(this).closest("tr").addClass("row_selected");                 
            }
            else 
            {
                $(this).closest("tr").removeClass("row_selected");
            }
    //});
});

Answer 2

为什么你使用foreach那就是造成问题的原因。

试试这个。

 $("table.datatable_ss").delegate("input:checkbox", "click", function (e) {
          if ($(this).closest("tr").find("input:checkbox:checked").length > 0) {
               $(this).closest("tr").addClass("row_selected");
          }
          else {
               $(this).closest("tr").removeClass("row_selected");
          }
 });

Answer 3

感谢您的回复。它帮助我找到了适用于所有场景的解决方案：

我最后只为“thead”输入框设置了一个单独的选择器，如果该行中的复选框碰巧被检查，则会突出显示所有行。

另一个选择器用于“tbody”复选框，并且遍历“tr”然后使用.find（）允许我检查是否检查了复选框，如果是，则该行保持突出显示。 / p>

感谢所有帮助我引发新思路的人。

继续更新的jquery：

//SELECTED ROW HIGHLIGHT for the THEAD "select all" checkboxes
                        $("'.$selector.' thead input:checkbox").click( function( e ) {

                            var xRow = $("'.$selector.' tbody tr");

                            //Search the body for any checked input boxes and highlight the row
                            if ( xRow.find("input").is(":checked") ) //find all checkboxes
                            {
                                xRow.addClass("row_selected");
                            }
                            else 
                            {
                                xRow.removeClass("row_selected");
                            }

                        });

                        //SELECTED ROW HIGHLIGHT
                        $("'.$selector.'").delegate("input:checkbox", "click", function( e ) {

                            //Search the body for any checked input boxes and highlight the row
                            if ( $(this).closest("tr").find("input").is(":checked") ) //find all checkboxes
                            {
                                $(this).closest("tr").addClass("row_selected");
                            }
                            else 
                            {
                                $(this).closest("tr").removeClass("row_selected");
                            }

                        });

jQuery选择器只选择最后一个复选框列，但应该选中所有复选框？

3 个答案: