You don't really add it inside a lifecycle function, you just add a reference to your handler function in the onClick property of your element. Which I guess technically is "inside" the render function.
Here's a little pseudo-code example (without all the TypeScript stuff from SPFx):
class MyComponent extends React.Component {
componentDidMount = () => {
// you could do stuff here if you need to,
// but not hooking up an event handler
}
// this is your event handler.
// it's just its own separate function
// that's part of your component
handleClick = () => {
// check to see if your main checkbox is checked,
// then get the other checkboxes and check them
}
render() {
return (
<div>
<input type='checkbox' onClick={this.handleClick}></input>
</div>
)
}
}
As far as reliably collecting all the other checkboxes, you could add a class to all of them that doesn't have any styling rules, but you could still use it to do
document.querySelectorAll('.yourCheckboxClass')
The real problem that I see, though is this: is the "checked" state of any of your checkboxes stored/controlled in component state? If so, modifying the DOM elements directly is going to get those elements out of sync with their components. You would have to figure out some way of calling a function on all the other components to set the checkbox state in order to "check" it. You could do it by passing around callback functions through props, or pub/sub might be a good solution there - have your master checkbox publish a "checked" message when it's checked, and have all the other checkboxes subscribing to that, and setting themselves as checked when they receive the message...
