title: How to check all checkboxes inside an specific table with one button
body: <p>I have many dinamic tables, each one creates a dinamic master checkbox inside an <strong>input</strong> and several checkboxes inside <strong>td</strong>'s (each one has a different ID). The idea is once I check or uncheck the master checkbox, every checkbox inside <strong>THAT</strong> specific table check/uncheck. (Some checkboxes inside table are previously check or uncheck from DDBB)</p>
  
  <p>Here is a simple HTML trying to emulate what I want to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function testing() {
  
    if ($("#masterSwitch1").prop("checked") == true) {
      $('table[id^="table1"]').each(function() {
        $('td[class^="clientAct"]').attr("checked");
        $('td[class^="clientAct"]').prop("checked", true);
      });
    } else {
      $('table[id^="table1"]').each(function() {
        $('td[class^="clientAct"]').removeAttr("checked");
        $('td[class^="clientAct"]').prop("checked", false);
      });
    }
  
    if ($("#masterSwitch2").prop("checked") == true) {
      $('table[id^="table2"]').each(function() {
        $('td[class^="clientAct"]').attr("checked");
        $('td[class^="clientAct"]').prop("checked", true);
      });
    } else {
      $('table[id^="table2"]').each(function() {
        $('td[class^="clientAct"]').removeAttr("checked");
        $('td[class^="clientAct"]').prop("checked", false);
      });
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="checkbox" onchange="testing()" id="masterSwitch1"&gt; Try me!
  &lt;table id="table1"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Table 1&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Name&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientAct" id="s1"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientEje" id="s2" checked&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Last Name&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientAct" id="s3" checked&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientEje" id="s4"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;input type="checkbox" onchange="testing()" id="masterSwitch2"&gt; Try me 2!
  &lt;table id="table2"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Table 2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Name 2&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientAct" id="s1"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientEje" id="s2" checked&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Last Name 2&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientAct" id="s3" checked&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="checkbox" class="clientEje" id="s4"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help. I really appreciate your guidance.</p>