JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />All</label>
<label>
<input type="checkbox" name="2" class="selector" />2</label>
<label>
<input type="checkbox" name="7" class="selector" />7</label>
<label>
<input type="checkbox" name="7" class="selector" />7</label>
</form>
</div>
<div>
<table class="tablea">
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td>7</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
CSS
.highlight {
background: #9ac99d;
}
tr.border_bottom td {
border-bottom: 1pt solid black;
}
.tablea td {
padding: 6px;
margin: 6px;
border: 2px solid #ccc;
}
JavaScript
// JavaScript Document
$(document).ready(function() {
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').removeClass("highlight").filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
});