JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="checkbox" name="attr1" value="1" />
    <input type="checkbox" name="attr1" value="2" />
    <input type="checkbox" name="attr1" value="3" />
    <input type="checkbox" name="attr1" value="4" />
    <input type="checkbox" name="attr2" value="xx" />
    <input type="checkbox" name="attr3" value="a" />
    <input type="checkbox" name="attr3" value="b" />
    <input type="checkbox" name="attr3" value="c" />
    <input type="checkbox" name="attr3" value="d" />
    <input type="text" name="attr4" value="" />
</form>

JavaScript

$('input[name^="attr"]:checkbox').each(function(i){
    $(this).attr("name",$(this).attr("name")+"[]");
});