JSFiddle - React, Tailwind, and code Playground

by highwayoflife

HTML

<input class="check_all" type="checkbox" name="foo[]" /> All<br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" /><br />
<input class="child" type="checkbox" name="foo[]" />

JavaScript

$('input.check_all').click(function() {
        if ($(this).attr('checked'))
        {
            $('input.child, input.check_all').attr('checked', 'checked');
        }
        else
        {
            $('input.child, input.check_all').removeAttr('checked');
        }
    });