JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
    "http://www.w3.org/TR/html4/loose.dtd">  
  
<form name="testeDesagrupamento" id="testeDesagrupamento">  
    <div id="agrupadora">  
        Agrupadora teste
        <input type="checkbox" id="agrupadora" name="agrupadora" value="teste">  
    </div>  
        <hr/>
    <div id="agrupadas">  
        Agrupadas     <br/>     
            <a href="#">teste.Teste</a>  
        <input type="checkbox" class="seraoDesagrupadas" name="seraoDesagrupadas" value="teste.Teste">  <br/>
            <a href="#">teste.Teste2</a>  
        <input type="checkbox" class="seraoDesagrupadas" name="seraoDesagrupadas" value="teste.Teste2">  <br/>
        <a href="#" id="selecionarTodos">Selecionar todos.</a>  
    </div>  
  
    <div id="informacoes">  
    </div>  
    <a href="agrupamento.do" name="Cancelar" type="button" class="botao" id="Cancelar">Cancelar</a>  
    <input class="botao" type="submit" value="Confirmar">  
</form>

JavaScript

$("#agrupadas").on('click','#selecionarTodos' ,function(){  
            if ($("input[type='checkbox']").prop("checked")) {  
                $(':checkbox').prop('checked', '');  
                $(this).text('Selecionar todos');  
            } else {  
                $(':checkbox').prop('checked', 'checked');  
                $(this).text('Deselecionar todos');  
            }  
        });