function isChecked(element) { return element.checked; } function getValue(element) { return element.value; } function WeekdayWidget(element) { var parts = Array.apply(null, element.querySelectorAll('.week-parts [type=checkbox]')); var days = Array.apply(null, element.querySelectorAll('.days [type=checkbox]')); function value() { return days.filter(isChecked).map(getValue); } this.value = value; function updateParts(selected) { function notSelected(val) { return selected.indexOf(val) === -1; } parts.forEach(function(part) { var partDays = part.dataset.values.split(','); var notSelectedParts = partDays.filter(notSelected); if (notSelectedParts.length === 0) { part.checked = true; part.indeterminate = false; } else if (notSelectedParts.length === partDays.length) { part.checked = false; part.indeterminate = false; } else { part.indeterminate = true; } // if (partDays.length === partDays.filter(notSelected).length) // part.checked = partDays.filter(notSelected).length === 0; }); } function updateDays(values, checked) { days.forEach(function(ele) { if (values.indexOf(ele.value) > -1) { ele.checked = checked; } }); } element.addEventListener('change', function(event) { if (event.target.tagName === 'INPUT') { if (event.target.name === element.dataset.name) { updateParts(value()); } else { updateDays(event.target.dataset.values.split(','), event.target.checked); updateParts(value()); } } }); } var widget = new WeekdayWidget(document.getElementById('days'));
<fieldset class="weekday-select" data-name="days" id="days"> <div class="week-parts"> <label> <input type="checkbox" data-values="0,1,2,3,4,5,6"> Any day </label> <label> <input type="checkbox" data-values="0,6"> Weekends </label> <label> <input type="checkbox" data-values="1,2,3,4,5"> Weekdays </label> </div> <div class="days"> <label> <input type="checkbox" value="1" name="days"> Monday </label> <label> <input type="checkbox" value="2" name="days"> Tuesday </label> <label> <input type="checkbox" value="3" name="days"> Wednesday </label> <label> <input type="checkbox" value="4" name="days"> Thursday </label> <label> <input type="checkbox" value="5" name="days"> Friday </label> <label> <input type="checkbox" value="6" name="days"> Saturday </label> <label> <input type="checkbox" value="0" name="days"> Sunday </label> </div> </fieldset>
.weekday-select > div { display: inline-block; vertical-align: top } .weekday-select > div > label { display: block; }