JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<label><input type="checkbox" id="checkAllId" /><span></span> all</label>
<input type="checkbox" class="mainobservations" />
<input type="checkbox" class="mainobservations" />
<input type="checkbox" class="mainobservations" />
<input type="checkbox" class="mainobservations" />
<input type="checkbox" class="mainobservations" />
<input type="checkbox" class="mainobservations" />

CSS

#checkAllId + span::before {
    content: 'check'
}

#checkAllId:checked + span::before {
    content: 'uncheck'
}

label {
    display: block;
}

JavaScript

$('#checkAllId').change(function(){
    $('input.mainobservations[type="checkbox"]').prop('checked', this.checked);
});