JSFiddle - React, Tailwind, and code Playground
by Simon Price
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="btn-group" id="columns">
<a class="btn btn-primary dropdown-toggle" style="width: 50px" data-toggle="dropdown" href="#"><i class="fa fa-list-alt"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="padding-left: 10px; padding-right: ">
<li><input type="button" id="selectAll" onclick="selectAllCheckBoxes return false" value="select all"><input type="button" id="deselectAll" value="de-select all"></li>
<table id="colSelectorCbList" class="colSelector" border="0" style="width:230px;">
<tr>
<td><input id="colSelectorCbList_0" type="checkbox" name="colSelectorCbList$0" checked="checked" /><label for="colSelectorCbList_0">Submit Date</label></td>
</tr><tr>
<td><input id="colSelectorCbList_1" type="checkbox" name="colSelectorCbList$1" checked="checked" /><label for="colSelectorCbList_1">Sample Receive Date</label></td>
</tr><tr>
<td><input id="colSelectorCbList_2" type="checkbox" name="colSelectorCbList$2" /><label for="colSelectorCbList_2">Inspection Date</label></td>
</tr><tr>
<td><input id="colSelectorCbList_3" type="checkbox" name="colSelectorCbList$3" /><label for="colSelectorCbList_3">Report Number</label></td>
</tr><tr>
<td><input id="colSelectorCbList_4" type="checkbox" name="colSelectorCbList$4" checked="checked" /><label for="colSelectorCbList_4">Report Issue Date</label></td>
</tr><tr>
<td><input id="colSelectorCbList_5" type="checkbox" name="colSelectorCbList$5" /><label for="colSelectorCbList_5">Service Provider</label></td>
</tr><tr>
<td><input id="colSelectorCbList_6" type="checkbox" name="colSelectorCbList$6" checked="checked" /><label...JavaScript
$(function() {
$('input#selectAll').on('click', function() {
$('#columns input:checkbox').prop('checked', true);
});
});
$(function() {
$('input#deselectAll').on('click', function() {
$('#columns input:checkbox').prop('checked', false);
});
});