title: Select all checkboxes in a table whose rows have style display tag
body: <p>I have a table with some rows having a style display tag <code>style="display: none;"</code>. I also have a a "toggle-all" checkbox. I'm trying to make my "select all" script only check the checkboxes that are visible in rows with tag <code>style="display: table-row;"</code>.</p>
  
  <p>This is the script i have so far, but it checks everything, regardless of visibility. How can i check/uncheck only those that are visible?</p>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$('#select-all').click(function (event) {
     if (this.checked) {
        $(':checkbox').each(function () {
            this.checked = true;
        });
     }
     if (!this.checked) {
        $(':checkbox').each(function () {
            this.checked = false;    
         });
     }
  });
  </code></pre>
  
  <p><strong>Toggle all checkbox</strong></p>
  
  <pre><code>&lt;input name="select-all" id="select-all" type="checkbox" value="checked" aria-label="..." style="cursor:pointer"&gt;
  </code></pre>
  
  <p><strong>Table</strong> </p>
  
  <pre><code>&lt;table&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
        &lt;td&gt;Checkbox&lt;/td&gt;
        &lt;td&gt;#&lt;/td&gt;
        &lt;td&gt;Number&lt;/td&gt;
        &lt;td&gt;Title&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr style="display: table-row;"&gt;
        &lt;td&gt;&lt;input type="checkbox" name="f1" value="1"&gt;&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Number1&lt;/td&gt;
        &lt;td&gt;Title1&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr style="display: none;"&gt;
        &lt;td&gt;&lt;input type="checkbox" name="f2" value="1"&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Number2&lt;/td&gt;
        &lt;td&gt;Title2&lt;/td&gt;
      &lt;/tr&gt;
  
      ...
  
      &lt;tr style="display: table-row;"&gt;
        &lt;td&gt;&lt;input type="checkbox" name="f3" value="1"&gt;&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;Number3&lt;/td&gt;
        &lt;td&gt;Title3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;    
  &lt;/table&gt;
  </code></pre>