JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
<td>
<ul>
<li>

<label><input type="checkbox" name="country" value="ALL"/> SELECT ALL</label>
</li>

<li>

<label><input type="checkbox" name="country" value="CD"/> CD</label>
</li>

<li>

<label><input type="checkbox" name="country" value="ED"/>ED</label>
</li>

<li>

<label><input type="checkbox" name="country" value="DD"/>DD</label>
</li>
<li>

<label><input type="checkbox" name="country" value="FD"/>FD</label>
</li>
<li>

<label><input type="checkbox" name="country" value="SD"/>SD</label>
</li>
</ul>
<td>
</tr>
</table>

JavaScript

$("input:checkbox[value=ALL]").change(function() {
	$("input:checkbox[name=" + $(this).prop("name") + "]").prop("checked", $(this).prop("checked"));
});
$("input:checkbox[value!=ALL]").change(function() {
	var allCheckboxesAreChecked = true;
	$("input:checkbox[name=" + $(this).prop("name") + "][value!=ALL]").each(function() {
		if (!$(this).prop("checked")) {
			allCheckboxesAreChecked = false;
			return false;
		}
	});
	$("input:checkbox[name=" + $(this).prop("name") + "][value=ALL]").prop("checked", allCheckboxesAreChecked);
});