jquery - 向所有元素添加/删除类

Question

这次我使用的是订单表。

我有那张 table :

<table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th class="selectAll"></th>
        <th>Zamówienie</th>
        <th>Przewoźnik</th>
        <th>Numer listu</th>
        <th>Waga</th>
        <th>Akcje</th>
      </tr>
    </thead>
    <tbody class="searchable">
      <tr id="701" class="" style="display: table-row;">
        <td class="lp text-center vert-align">1.</td>
        <td class="reference">Sample order 3</td>
        <td class="przewoznik">UPS</td>
        <td class="numer_listu">BB0000001</td>
        <td class="waga">150</td>
        <td style="text-align: center;">
          <button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"</span>  
          </button>
          <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
          </button>
        </td>
      </tr>
      <tr id="700" class="success" style="display: table-row;">
        <td class="lp text-center vert-align">2.</td>
        <td class="reference">Sample order 2</td>
        <td class="przewoznik">DPD</td>
        <td class="numer_listu"></td>
        <td class="waga">0</td>
        <td style="text-align: center;">
          <button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
            <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
          </button>
          <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
          </button>
        </td>
      </tr>
      <tr id="699" class="" style="display: table-row;">
        <td class="lp text-center vert-align">3.</td>
        <td class="reference">Sample order</td>
        <td class="przewoznik">DPD</td>
         <td class="numer_listu">RR0000001</td>
         <td class="waga">0</td>
         <td style="text-align: center;">
           <button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie">
             <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
           </button>
           <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">
             <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
           </button>
         </td>
       </tr>
     </tbody>
 </table>

我想通过单击来选择行:

$("body").on('click', 'tbody tr', function(event){
    $(this).toggleClass('success');
});

然后通过单击选择/取消选择所有行:

$("body").on('click', 'table th.selectAll', function(event){
    $('tbody tr').toggleClass('success');
});

但问题是，当我已经选择了一个时，我想全选。然后它反转我的选择:

我希望选择和取消选择所有元素，即使选择了一些元素也是如此。

Answer 1

你可以试试这个...(如果你正确使用 jQuery)

    $("body").on('click', 'table th.selectAll', function(event){
    if($(this).hasClass("selected"){
       $('tbody tr').removeClass('success');
       $(this).removeClass("selected");
    }
    else{
       $('tbody tr').addClass('success');
       $(this).addClass("selected");
    }
    });

当所有行都被选中时，将类“selected”添加到元素，反之亦然。