JSFiddle - React, Tailwind, and code Playground

HTML

<label for="selectAll"><input type="checkbox" id="selectAll"> Select all</label>
    
    
<label for="ceckbox_1"><input type="checkbox" id="ceckbox_1" class="selectbox">Checkbox One</label>
    
<label for="ceckbox_2"><input type="checkbox" id="ceckbox_2" class="selectbox">Checkbox Two</label>
    
<label for="ceckbox_3"><input type="checkbox" id="ceckbox_3" class="selectbox">Checkbox Three</label>

CSS

label[for=selectAll]{background:rgba(0,0,0,0.4); padding:5px;color:#fff;font-weight:bold;}

label{display:block;width:200px; border-bottom:solid 1px red;cursor:pointer;margin-top:20px;background:rgba(0,0,0,0.1);}

JavaScript

$('#selectAll').on('click', function(){
		$('.selectbox').attr('checked', $(this).is(":checked"));
	});