JSFiddle - React, Tailwind, and code Playground

HTML

<div onclick="onclick_cover_checkbox_fn()" style="cursor: pointer; float: left; width: 35px; height: 35px; border: solid 1px #b2b2b2; border-radius: 3px; margin-left: 5px;">
<input type="checkbox" id="main_checkbox_checked_uncheck" onclick="checked_all_or_uncheck_all_fn()" value="0" style="margin: 11px 11px;cursor: pointer;">
</div>

<script>
function onclick_cover_checkbox_fn(){
    var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
    var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;

    if(main_checkbox_checked_uncheck_var_checked_status != true)
    {
        document.getElementById("main_checkbox_checked_uncheck").checked = true;
        checked_all_or_uncheck_all_fn();
    }
    else
    {
        document.getElementById("main_checkbox_checked_uncheck").checked = false;
        checked_all_or_uncheck_all_fn();
    }
}
</script>

<script>
function checked_all_or_uncheck_all_fn(){
    alert("5555");
}
</script>