Селектор 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"); 
      } 
    }); 
}); 

Heres 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

Я получил подсветку для работы, удалив цикл с помощью флажков. Я думаю, что лучше отделить проводку события «все-все», а также провести проводку по ячеек строки.

// 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

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

У меня был отдельный селектор только для полей ввода «thead», который выделял бы все строки, если бы флажок в этой строке был проверен.

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

Спасибо за все, что помогло мне вызвать новый образ мыслей об этом.

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

         });