How to make checkboxes behave like radios dependant on classname
HTML
<table>
<tr>
<th>
Early Morning<br>
<small>6am-9am</small>
</th>
<td>
<input type="checkbox" class="earlyMorning" name="field_807[]" id="field_871_0" value="Early Morning 6am-9am Monday" />
</td>
<td>
<input type="checkbox" class="lateMorning" name="field_807[]" id="field_872_1" value="Early Morning 6am-9am Tuesday" />
</td>
<td>
<input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_873_2" value="Early Morning 6am-9am Wednesday" />
</td>
<td>
<input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_874_3" value="Early Morning 6am-9am Thursday" />
</td>
<td>
<input type="checkbox" class="earlyEvening" name="field_807[]" id="field_875_4" value="Early Morning 6am-9am Friday" />
</td>
<td>
<input type="checkbox" class="lateEvening" name="field_807[]" id="field_876_5" value="Early Morning 6am-9am Saturday" />
</td>
<td>
<input type="checkbox" class="overnight" name="field_807[]" id="field_877_6" value="Overnight 12am-6am Sunday" />
</td>
</tr>
<tr>
<th>
Late Morning<br>
<small>9am-12pm</small>
</th>
<td>
<input type="checkbox" class="earlyMorning" name="field_807[]" id="field_878_7" value="Late Morning 9am-12pm Monday" />
</td>
<td>
<input type="checkbox" class="lateMorning" name="field_807[]" id="field_879_8" value="Late Morning 9am-12pm Tuesday" />
</td>
<td>
<input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_880_9" value="Late Morning 9am-12pm Wednesday" />
</td>
<td>
<input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_881_10" value="Late Morning 9am-12pm Thursday" />
</td>
<td>
<input type="checkbox" class="earlyEvening" name="field_807[]" id="field_882_11" value="Late Morning 9am-12pm Friday" />
</td>
<td>
<input type="checkbox" class="lateEvening"...
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 'earlyMorning':
case 'lateMorning':
case 'earlyAfternoon':
case 'lateAfternoon':
case 'earlyEvening':
case 'lateEvening':
case 'overnight':
!groups[c] && (groups[c] = []);
groups[c].push(inp);
inp.addEventListener('change', react);
break;
}
}
}
});