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;
}