Web page doesn't behave as though checkboxes are checked after manipulating in the console

Excuse my limited ability to be able to frame the question. I need to check 100 boxes to apply an accounting rule to 100 bank entries (in FreeAgent). In the console in Google Chrome I have typed the following, which succesfully checks the first box in the list. (Once it works I will put it in a loop so it checks all of them but I'm not at that point yet.)

var x = document.getElementsByClassName('FormElement-checkbox');
x[1].firstElementChild.checked = true;

When I try to continue with the procedure, the web page doesn't "realise" that the boxes have been checked. I can only get it to work if I physically click the checkboxes individually on the page - the fact they appear checked doesn't seem to matter to the page. So there is obviously something I am missing.

I can succesfully enter text into boxes and select items in drop downs. I have tried inspecting the checkbox element and seeing what happens when it is checked by clicking on it, but I can't see any difference in the HTML. I have explored a lot of the attributes in the javascript for that object when typing

x;

which is how I found the .firstElementChild.checked = true in the first place.

I don't know whether it is something specific to the page itself or whether in general I don't have enough experience to be able to tackle all data entry situations yet. I have tried searching for answers on this forum and elsewhere.