JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" onclick="toggleChecked(this.checked)"> Check all
<br />
<input type="checkbox" class="chkbx" value="1"> 1
<br />
<input type="checkbox" class="chkbx" value="2"> 2
<br />
<input type="checkbox" class="chkbx" value="3"> 3
<br />
Status: <span id="status"></span>
JavaScript
$('.chkbx').live('change', function() {
if($(this).is(":checked")) {
$('#status').text('something is checked');
}
else if($('.chkbx:checked').length === 0) {
$('#status').text('');
}
});
function toggleChecked(status) {
$("input[type='checkbox']").prop("checked", status).change();
}