JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="wrapper">
<ul>
<li>
Real
<input type="checkbox" name="real" id="real">
</li>
<li>
Strip
<input type="checkbox" name="sim" id="sim">
</li>
<li>
Reverse
<input type="checkbox" name="rev" id="rev">
</li>
<li>
Foil
<input type="checkbox" name="foi" id="foi">
</li>
</ul>
</div>
</body>
JavaScript
var controller = {
realtime: true,
listenz: function(ele, e, fn, c, o) {
//validate
if (!(e instanceof Array)) {
throw 'Javascript Listener: Error 642';
}
var h = function() {
fn.apply(this, o && o instanceof Array ? o : arguments);
};
//bind events
for (var i = 0; i < e.length; i ++) {
ele.addEventListener(e[i], h, c);
}
},
initz: function() {
this.listenz(document.getElementById("real"), ["change"], this.handleEvent, false);
this.listenz(document.getElementById("foi"), ["change"], this.handleEvent, false);
this.listenz(document.getElementById("sim"), ["change"], this.handleEvent, false);
this.listenz(document.getElementById("rev"), ["change"], this.handleEvent, false);
},
handleEvent: function(e) {
switch (e.target.id) {
case 'real':
alert('real');
//this.realtime = e.target.checked ? true : false;
//this.realz();
if (this.realtime) this.submitz();
break;
default:
console.log('default');
if (this.realtime) this.submitz();
break;
}
}
};
controller.initz()