JSFiddle - React, Tailwind, and code Playground

HTML

<input id="Alloption" type="checkbox" checked="checked" value="All" style=" color: Black" class="chkdisplay" /><span style=" color: Black">All </span>
<br />
<input id="otherCheckbox2" type="checkbox" value="Accepted" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Accepted </span>
<br />
<input id="otherCheckbox3" type="checkbox" value="Contracted" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Contracted</span>
<br />
<input id="otherCheckbox4" type="checkbox" value="Pending" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Pending</span>
<br />
<input id="otherCheckbox5" type="checkbox" value="Pre-Authorized" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Pre-Authorized</span>
<br />
<input id="otherCheckbox6" type="checkbox" value="Show Deleted" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Show Deleted</span>
<br />
<input id="otherCheckbox7" type="checkbox" value="Treated" style=" color: Black" class="chkdisplay" /><span style=" color: Black">Treated</span>
<br />

JavaScript

$(document).ready(function(){
$('[id^="otherCheckbox"]').on('change blur', function () {
    alert("hi");
    $('#Alloption').prop('checked', !($('[id^="otherCheckbox"]').not(':checked').length));
});
});