Buttons to select checkboxes by name
<p>I have the following checkboxes in an HTML form.</p>

<pre><code>&lt;ul id="selection"&gt;
  &lt;span&gt;&lt;label&gt;First&lt;br&gt;&lt;input type="checkbox" name="First"&gt;&lt;/label&gt;&lt;/span&gt;
  &lt;span&gt;&lt;label&gt;Second&lt;br&gt;&lt;input type="checkbox" name="Second"&gt;&lt;/label&gt;&lt;/span&gt;
  &lt;span&gt;&lt;label&gt;Third&lt;br&gt;&lt;input type="checkbox" name="Third"&gt;&lt;/label&gt;&lt;/span&gt;
  &lt;span&gt;&lt;label&gt;Fourth&lt;br&gt;&lt;input type="checkbox" name="Fourth"&gt;&lt;/label&gt;&lt;/span&gt;
  &lt;span&gt;&lt;label&gt;Fifth&lt;br&gt;&lt;input type="checkbox" name="Fifth"&gt;&lt;/label&gt;&lt;/span&gt;
&lt;/ul&gt;
</code></pre>

<p>I'm trying to create two buttons. One that would select the first two and one that would select all of them.<br>
I managed to select all of them with one button using this:<br></p>

<pre><code>&lt;input type="button" class="check btn" onClick="select(this)" value="Select All"/&gt;
    &lt;script&gt;
      $('.check:button').click(function(){
          var checked = !$(this).data('checked');
          $('input:checkbox').prop('checked', checked);
          $(this).val(checked ? 'uncheck all' : 'Select' )
          $(this).data('checked', checked);
      });
    &lt;/script&gt;
</code></pre>

<p>But I can't seem to get the two buttons working.<br>
My JavaScript knowledge is pretty limited and been searching for days, unsuccessfully for a solution that works.<br>
Can please someone help? a detailed explanation would be awesome.</p>