JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
    <dt>Queen</dt>
    <dd>
        <ul>
            <li>
                <input id="Mercury" name="bandmembers" value="Mercury" type="checkbox" />
                <label for="Mercury">Freddie</label>
            </li>    
            <li>
                <input id="May" name="bandmembers" value="May" type="checkbox" />
                <label for="May">Brian</label>
            </li>    
            <li>
                <input id="Taylor" name="bandmembers" value="Taylor" type="checkbox" />
                <label for="Taylor">Roger</label>
            </li>    
            <li>
                <input id="Deacon" name="bandmembers" value="Deacon" type="checkbox" />
                <label for="Deacon">John</label>
            </li>    
        </ul>
    </dd>
    <dt>Pink Floyd</dt>
    <dd>
        <ul>
            <li>
                <input id="Waters" name="bandmembers" value="Waters" type="checkbox" />
                <label for="Waters">Roger</label>
            </li>    
            <li>
                <input id="Gilmour" name="bandmembers" value="Gilmour" type="checkbox" />
                <label for="Gilmour">David</label>
            </li>    
            <li>
                <input id="Mason" name="bandmembers" value="Mason" type="checkbox" />
                <label for="Mason">Nick</label>
            </li>    
            <li>
                <input id="Wright" name="bandmembers" value="Wright" type="checkbox" />
                <label for="Wright">Richard</label>
            </li>    
        </ul>
    </dd>
</dl>

CSS

li{margin-left:1em}

JavaScript

$("dt")
    .css("cursor","pointer")
    .click(function(){
    var $el = $(this).next();
    var $checks = $el.find(":checkbox");
    if($checks.is(":not(:checked)")){
        $checks.attr("checked",true); 
    }else{
        $checks.attr("checked",false); 
    }
});