JSFiddle - React, Tailwind, and code Playground

HTML

1<input type="checkbox" id="1" name="1"><br>
2<input type="checkbox" name="2"><br>
3<input type="checkbox" name="3"><br>
4<input type="checkbox" name="4"><br>
5<input type="checkbox" name="5"><br>
<p>Todas <input type="checkbox" id="all" name="all"/> </p>

JavaScript

var checkedAll = false;

//$(document).on('click', '#all', function (e) {
//    $('input[type="checkbox"]').not('#all').each(function() {
        //Verificamos se é a hora de dar checked a todos ou tirar;
//        checkedAll ? $(this).prop('checked', false) : $(this).prop('checked', true);
//    });
    //Invertemos ao final da execução, caso a última tenha sido true para checar todos, tornamos ele false para o próximo clique;
//    checkedAll = checkedAll ? false : true;
//});

document.getElementById("all").addEventListener("click", function(){
    checkBoxs = document.querySelectorAll('input[type="checkbox"]:not([id=all])');
    //"Hack": http://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
    [].forEach.call(checkBoxs, function(checkbox) {
        //Verificamos se é a hora de dar checked a todos ou tirar;
        checkbox.checked = checkedAll ? false : true;
    });
    //Invertemos ao final da execução, caso a última tenha sido true para checar todos, tornamos ele false para o próximo clique;
    checkedAll = checkedAll ? false : true;
});