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")
    .wrapInner("<label>")
    .prepend("<input type='checkbox'/>")
    .click(function(){
        var $el = $(this).next();
        var $checks = $el.find(":checkbox");
        if($checks.is(":not(:checked)")){
            $checks.attr("checked",true).change(); 
        }else{
            $checks.attr("checked",false).change(); 
        }
    })
    .next().find(":checkbox").change(function(){
        var $el = $(this).parents("dd");
        $el.prev()
            .find(":checkbox").attr("checked",!$el.find(":checkbox").is(":not(:checked)")); 
    });