JSFiddle - React, Tailwind, and code Playground

by salvadoresc

HTML

<input type="checkbox"  name="freeallow[1][]" class="freeallow">
<input type="checkbox"  name="freeallow[1][]" class="freeallow">
<input type="checkbox"  name="freeallow[1][]" class="freeallow">
<br />
<br />
<br />
<br />
<input type="checkbox" name="secondpiece[1][]" class="lateAfternoon">
<input type="checkbox" name="secondpiece[1][]" class="lateAfternoon">
<input type="checkbox" name="secondpiece[1][]" class="lateAfternoon">

JavaScript

/// this code will not work with older versions of Internet Explorer
/// you will need a polyfill for addEventListener, or implement conditionals
/// to use attachEvent instead.

window.addEventListener('load', function(){
    var inps = document.getElementsByTagName('input'), inp;
    var i, l = inps.length, c;
    var groups = {};
    var react = function(e){
      var inp = e.target, group = groups[inp.className], i, l, otherinp;
      if ( group ) {
        for ( i=0, l=group.length; i<l; i++ ) {
          otherinp = group[i];
          if ( inp !== otherinp ) {
            otherinp.checked = false;
          }
        }
      }
    };
    /// group inputs based on className
    for ( var i=0; i<l; i++ ) {
        if ( (inp = inps[i]) && inp.type == 'checkbox' ) {
            switch( (c = inp.className) ) {
              case 'freeallow':
              case 'lateAfternoon':
              case 'earlyEvening':
              case 'lateEvening':
              case 'overnight':
                !groups[c] && (groups[c] = []);
                groups[c].push(inp);
                inp.addEventListener('change', react);
              break;
            }
        }
    }
});