JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="list-style:none">
<li>
    <label><input class="checkhour" type="checkbox"> One</label>
    <label><input class="checkhour" type="checkbox"> Two</label>
    <label><input class="checkhour" type="checkbox"> Three</label>
</li>
<li><button type="button" class="checkall">select/deselect</button></li>
</ul>

JavaScript

var state = false; // desecelted

$('.checkall').click(function () {
	
    $('.checkhour').each(function() {
    	if(!state) {
        	this.checked = true;
        } else {
         	this.checked = false;
        }
    });
    
    //switch
    if (state) {
     	state = false;   
    } else {
        state = true;
    }
    
});