JSFiddle - React, Tailwind, and code Playground

HTML

<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
    <input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
    <input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
    <input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
    <input id="ingredients2" name="ingredients2" type="checkbox" value="1" rel="read">
        
</div>

JavaScript

$('#readall').click(function () {
    var checkboxList = $('#permGrid input[rel="read"]')
    $(checkboxList).attr('rel','read').prop('checked', !this.checked);
});