JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
		<thead>
			<tr>
				<th><input type="checkbox" id="allcb" name="allcb"/></th>
				<th>values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" id="cb1" name="cb[]"/></td>
				<td>value1</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="cb2" name="cb[]"/></td>
				<td>value2</td>
			</tr>
			<tr>
				<td><input type="checkbox" id="cb3" name="cb[]"/></td>
				<td>value3</td>
			</tr>
		</tbody>
	</table>

JavaScript

/*
		* Click on select all checkbox
		*/
		$('#allcb').click(function(e) {
			$('[name="cb[]"]').prop('checked', this.checked);
		});

		/*
		* Click on another checkbox can affect the select all checkbox
		*/
		$('[name="cb[]"]').click(function(e) {
			if ($('[name="cb[]"]:checked').length == $('[name="cb[]"]').length || !this.checked)
				$('#allcb').prop('checked', this.checked);
		});