JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="c1" />
<input type="checkbox" id="c2" />

JavaScript

'use strict';

const App = {
	state: {},
	setState(nextState) {
		this.state = Object.assign({}, this.state, nextState);
	},
	handleChange(e, state) {
		if (e.target.checked) {
			this.setState(state.checked);
		} else {
			this.setState(state.unchecked);
		}
		
		console.log(this.state);
	},
	init() {
		const c1 = document.getElementById('c1');
		const c2 = document.getElementById('c2');
		
		const c1State = {
			checked: {
				c1: true
			},
			unchecked: {
				c1: false
			}
		};

		const c2State = {
			checked: {
				c2: 'Hey there!',
				foo: 'foo'
			},
			unchecked: {
				c2: 'Cya!',
				bar: 'bar'
			}
		};
		
		c1.addEventListener('change', e => this.handleChange(e, c1State));
		c2.addEventListener('change', e => this.handleChange(e, c2State));
	}
}

App.init();