JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="checkbox1div">
        <a href='#' onclick='set_checked(false,"1")' class="clear">clear</a>
        <a href='#' onclick='set_checked(true,"1")' class="select">select</a>
    </div>
    <div>
        <input type='checkbox' id='checkbox1'/>
    </div>
</div>

<div>
    <div id="checkbox2div">
        <a href='#' onclick='set_checked(false,"2")' class="clear">clear</a>
        <a href='#' onclick='set_checked(true,"2")' class="select">select</a>
    </div>
    <div>
        <input type='checkbox' id='checkbox2'/>
    </div>
</div>

CSS

.checked .select,
.cleared .clear {
    color: gray;
}

JavaScript

window.set_checked = function(checked, id){
   $("#checkbox"+id).prop("checked", checked).change(); // trigger handler
};

$("input").change(function() {
    document.getElementById(this.id+"div").className = this.checked
      ? "checked"
      : "cleared"
    ;
}).change(); // init