JSFiddle - React, Tailwind, and code Playground

by Brian Duffey

HTML

<label><input type="checkbox" class="mobile devPC" id="devPCPC" value="PC" /> PC</label>
<label><input type="checkbox" class="mobile devPC" id="devPCTAB" value="TAB" /> Tablet</label>
<label><input type="checkbox" class="mobile devPC" id="devPCMOB" value="MOB" /> Smartphone</label>
<br><br>
<div id="result">
INVALID! YOU MUST SELECT AT LEAST 1
</div>

JavaScript

function setValue(ev) {
	var $checkbox = jQuery(ev.currentTarget),
  		checkClass = $checkbox.attr('id').replace($checkbox.val(), ''),
  		$checked = jQuery('.' + checkClass + ':checked'),
      checkedCt = $checked.length,
      mobObj = {
      	PCTABMOB: 1,
        PCTAB: 2,
        PCMOB: 3,
        TABMOB: 4,
        PC: 5,
        MOB: 6,
        TAB: 7
      },
      key = '',
      descr = '';
  if (!checkedCt) $checked = $checkbox.prop('checked', true);
  $checked.each(function(i, el) {
  	key += el.value;
    descr += jQuery(el).parent('label').text() + ', ';
  });
  descr = descr.substring(0, descr.length - 2);
  jQuery('#result').text(mobObj[key] + ' - ' + (checkedCt < 2 ? descr + ' only' : descr));
}

jQuery(function() {
	jQuery(document).on('change', '.mobile', setValue);
});