JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<input type="checkbox" id="checkAll" />
<label for='checkAll'>Select All</label>
<br />
<input type='checkbox' id='checkbox1' name='chkGroup1' />
<label for='checkbox1'>product1</label>
<br />
<input type='checkbox' id='checkbox2' name='chkGroup1' />
<label for='checkbox2'>product2</label>
<br />
<input type='checkbox' id='checkbox3' name='chkGroup1' />
<label for='checkbox3'>product3</label>
<br />
<input type='checkbox' id='checkbox4' name='chkGroup1' />
<label for='checkbox4'>product4</label>

JavaScript

$('[name="chkGroup1"]').click(function () {
    if ($('[name="chkGroup1"]:checked').length == $('[name="chkGroup1"]').length) {
        $('#checkAll').prop('checked', true)
    } else {
        $('#checkAll').prop('checked', false)
    }
})