How to Select / Deselect All Checkboxes using jQuery with a one Button?
<p>I would like to to use a single button click to toggle between selecting all check boxes within a particular div/table and deselecting all check boxes. In addition i wanted the link/or button to change names to 'Select All' &amp; ' deselect All'. I've seen similar answers using check boxes or two different button clicks but nothing for this. I would to keep it simple and short using jquery.</p>

<p>HTML</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-html lang-html prettyprint-override"><code>&lt;body&gt;
&lt;div id="main"&gt;
&lt;div id="first"&gt;
&lt;h1&gt;Check &amp; Uncheck All Options&lt;/h1&gt;
&lt;p&gt;Check &amp; Uncheck All Options by Button&lt;/p&gt;
&lt;input id="checkAll" type="button" value="Check/Uncheck All "&gt;
&lt;div class="button"&gt;
&lt;input class="first" id="Item 1" name="option1" type="checkbox"&gt;
&lt;label class="label1" for="Item 1"&gt;Item 1&lt;/label&gt;
&lt;input class="first" id="Item 2" name="option1" type="checkbox"&gt;
&lt;label class="label1" for="Item 2"&gt;Item 2&lt;/label&gt;
&lt;input class="first" id="Item 3" name="option1" type="checkbox"&gt;
&lt;label class="label1" for="Item 3"&gt;Item 3&lt;/label&gt;
&lt;input class="first" id="Item 4" name="option1" type="checkbox"&gt;
&lt;label class="label1" for="Item 4"&gt;Item 4&lt;/label&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>