JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="mainDiv"></div>
<script>
$(document).ready(function(){
    str = "";
    for(i=0;i<10;i++){
        for(j=0;j<10;j++){
            str += '<input type="checkbox" id="ch_'+i+j+'" class="check_'+i+' check_'+j+'" onclick="chk(this)" />';
        }
        str += "<br />";
    }
    $("#mainDiv").html(str);
});

function chk(that){
    if(that.checked == true){
        for(i=0;i<10;i++){
            for(j=0;j<10;j++){
                document.getElementById("ch_"+i+j).checked=false;
            }
        }
        var str = that.id.split("_")[1];
        var classList = document.getElementsByClassName("check_"+str.substr(0,1));
        for(i=0;i<classList.length;i++){
            classList[i].checked = true;
        }
        var classList = document.getElementsByClassName("check_"+str.substr(1,2));
        for(i=0;i<classList.length;i++){
            classList[i].checked = true;
        }
    }
}
</script>

CSS

input[type=checkbox]{
    margin-right:5px
}