JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<form>
    <input class="parentage" type="checkbox" name="colors" value="" /> Letters<br/>
    <input class="parentage" type="checkbox" name="numbers" value="" /> Numbers<br/>
    <input class="parentage" type="checkbox" name="letters" value="" /> Colors<br/>
</form>

<div class="other_container">
    <div class="col1">
        <input class="letters" type="checkbox" name="a" value="" /> A<br/>
        <input class="letters" type="checkbox" name="b" value="" /> B<br/>
        <input class="letters" type="checkbox" name="c" value="" /> C<br/>
    </div>
    <div class="col2">
        <input class="colors" type="checkbox" name="one" value="" /> Red<br/>
        <input class="colors" type="checkbox" name="two" value="" /> Blue<br/>
        <input class="colors" type="checkbox" name="green" value="" /> Green<br/>
    </div>
    <div class="col3">
        <input class="numbers" type="checkbox" name="red" value="" /> 1<br/>
        <input class="numbers" type="checkbox" name="blue" value="" /> 2<br/>
        <input class="numbers" type="checkbox" name="three" value="" /> 3<br/>
    </div>
</div>

CSS

.other_container {
    display:block;
    margin-top:30px;
}

.col1, .col2, .col3 {
    width: 100px;
    float: left;
    display: block;
}

JavaScript

var forEach = Function.prototype.call.bind(Array.prototype.forEach);

forEach(document.querySelectorAll("input.parentage"), function(elem){
    elem.addEventListener('change', function (event) {
        forEach(document.querySelectorAll("input." + this.name), function(check){
            check.checked = elem.checked;
        });
    });
});