JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="selection">
  <li><label>First<input type="checkbox" name="First"></label></li>
  <li><label>Second<input type="checkbox" name="Second"></label></li>
  <li><label>Third<input type="checkbox" name="Third"></label></li>
  <li><label>Fourth<input type="checkbox" name="Fourth"></label></li>
  <li><label>Fifth<input type="checkbox" name="Fifth"></label></li>
</ul>
<input type="button" class="check btn" id="selectall" value="Select All"/>
<input type="button" class="check btn" id="selecttwo" value="Select Two"/>
<input type="button" class="check btn" id="resetall" value="Reset All"/>

CSS

ul li{
     list-style: none;
}

JavaScript

$("#selectall").click(function(){
$("input[type='checkbox']").prop('checked', true);
});
$("#selecttwo").click(function(){
$("input[name='First'], input[name='Second']").prop('checked', true);
});
$("#resetall").click(function(){
$("input[type='checkbox']").prop('checked', false);
});