title: Add / remove class to all elements
body: <p>this time I am working with the orders table.</p>
  
  <p>I have that table:
  <a href="https://i.stack.imgur.com/xm3wy.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xm3wy.gif" alt="enter image description here"></a></p>
  
  <pre><code>&lt;table class="table table-striped table-bordered"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th class="selectAll"&gt;&lt;/th&gt;
          &lt;th&gt;Zamówienie&lt;/th&gt;
          &lt;th&gt;Przewoźnik&lt;/th&gt;
          &lt;th&gt;Numer listu&lt;/th&gt;
          &lt;th&gt;Waga&lt;/th&gt;
          &lt;th&gt;Akcje&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="searchable"&gt;
        &lt;tr id="701" class="" style="display: table-row;"&gt;
          &lt;td class="lp text-center vert-align"&gt;1.&lt;/td&gt;
          &lt;td class="reference"&gt;Sample order 3&lt;/td&gt;
          &lt;td class="przewoznik"&gt;UPS&lt;/td&gt;
          &lt;td class="numer_listu"&gt;BB0000001&lt;/td&gt;
          &lt;td class="waga"&gt;150&lt;/td&gt;
          &lt;td style="text-align: center;"&gt;
            &lt;button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie"&gt;
              &lt;span class="glyphicon glyphicon-edit" aria-hidden="true"&lt;/span&gt;  
            &lt;/button&gt;
            &lt;button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal"&gt;
              &lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="700" class="success" style="display: table-row;"&gt;
          &lt;td class="lp text-center vert-align"&gt;2.&lt;/td&gt;
          &lt;td class="reference"&gt;Sample order 2&lt;/td&gt;
          &lt;td class="przewoznik"&gt;DPD&lt;/td&gt;
          &lt;td class="numer_listu"&gt;&lt;/td&gt;
          &lt;td class="waga"&gt;0&lt;/td&gt;
          &lt;td style="text-align: center;"&gt;
            &lt;button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie"&gt;
              &lt;span class="glyphicon glyphicon-edit" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal"&gt;
              &lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr id="699" class="" style="display: table-row;"&gt;
          &lt;td class="lp text-center vert-align"&gt;3.&lt;/td&gt;
          &lt;td class="reference"&gt;Sample order&lt;/td&gt;
          &lt;td class="przewoznik"&gt;DPD&lt;/td&gt;
           &lt;td class="numer_listu"&gt;RR0000001&lt;/td&gt;
           &lt;td class="waga"&gt;0&lt;/td&gt;
           &lt;td style="text-align: center;"&gt;
             &lt;button type="button" class="btn btn-info action action-editOrder btn-xs" data-toggle="tooltip" title="Edytuj zamówienie"&gt;
               &lt;span class="glyphicon glyphicon-edit" aria-hidden="true"&gt;&lt;/span&gt;
             &lt;/button&gt;
             &lt;button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal"&gt;
               &lt;span class="glyphicon glyphicon-trash" aria-hidden="true"&gt;&lt;/span&gt;
             &lt;/button&gt;
           &lt;/td&gt;
         &lt;/tr&gt;
       &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>And I would like select rows by clicking:
  <a href="https://i.stack.imgur.com/ZdLnY.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZdLnY.gif" alt="enter image description here"></a></p>
  
  <pre><code>$("body").on('click', 'tbody tr', function(event){
      $(this).toggleClass('success');
  });
  </code></pre>
  
  <p>And select / deselect all rows by clicking:
  <a href="https://i.stack.imgur.com/By9Ty.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/By9Ty.gif" alt="enter image description here"></a></p>
  
  <pre><code>$("body").on('click', 'table th.selectAll', function(event){
      $('tbody tr').toggleClass('success');
  });
  </code></pre>
  
  <p>But problem is when I want to select all in case when I have already one selected. Then it inverts my selection:
  <a href="https://i.stack.imgur.com/z36p2.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z36p2.gif" alt="enter image description here"></a></p>
  
  <p>I expect select and deselect all items, even if some are selected.</p>