Селектор jQuery только выбирает последний столбец флажка, но стоит ли устанавливать все флажки?

Question

Я пытаюсь выделить всю строку, когда пользователь устанавливает флажки внутри <table>.Я использую плагин «dataTable» для jquery.

Я могу получить часть этой работы так, как я хочу.В настоящее время крайний правый или последний столбец, имеющий «флажки», применяет к нему селектор.Поэтому, когда я отмечаю флажок (либо флажок check_all в «th», либо флажок в «td», он правильно выделяет строку. Но если я отмечаю любой флажок в столбце со второго по последний, ничего не происходит. Он действует какздесь не применяется селектор.

Я не понимаю, что случилось с моим 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

Почему вы используете 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 2

Спасибо за ваши ответы.Это помогло мне найти решение, которое работало для всех сценариев:

В итоге у меня был отдельный селектор только для полей ввода "thead", которые подсвечивали бы все строки, если бы флажок в этом ряду был установлен.

Другой селектор предназначен для флажков «tbody», и переход к «tr» с последующим использованием .find () позволил мне проверить, установлен ли флажок, если так, строка осталасьвыделено.

Спасибо всем, кто помог мне запустить новое мышление об этом.

Вот обновленный 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");
                            }

                        });

Answer 3

Я заставил подсветку работать, убрав циклические флажки. Я думаю, что лучше отделить соединение события флажка выбора всех и событие строки флажка строки.

// 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");
            }
    //});
});