Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Date Range Checks </title>

<style type="text/css">
#debug {
	display: inline-block;
	width: 400px;
    height: 200px;
	padding: 6px;
	margin: 20px auto 0 auto;
	vertical-align: center;
	text-align: center;
	font-size: 13pt;
	font-family: consolas, courier, serif;
	font-weight: normal;
	overflow: auto;
    border: 1px solid #DDDDDD;
}

#limitDateDisplay label {
    margin-right: 6px;
    padding: 2px;
}
</style>

<script type="text/javascript">
'use strict';

var boxes, limitYear, debug;

function $(id) {
    return document.getElementById(id);
}

function uncheck(box) {
    box.checked = false;
}

function isChecked(box) {
    return box.checked;
}

function getBoxAndYear(box) {
    return box.value + '-' + limitYear.value;
}

function clearDateRange() {
    [].forEach.call(boxes, uncheck);
}

function printDebug() {
    debug.textContent = [].filter.call(boxes, isChecked).map(getBoxAndYear).join('\n');
}

window.onload = function() {
    // using global variables here, so we don't have to call
    // getElementsByClassName/getElementById more than once
    boxes = document.getElementsByClassName('box');
    limitYear = $('limitYear');
    debug = $('debug');

    limitYear.value = new Date().getFullYear();
    printDebug();

    $('clear').addEventListener('click', function () {
        clearDateRange();
        printDebug();
    }, false);

    // use only one event listener with delegation, to listen
    // to all the checkboxes at once, and print the debug for each change
    $('limitDateDisplay').addEventListener('change', printDebug, false);
};
</script>

</head>

<body>

<div id="limitDateDisplay">
    Limit to month(s): <button id="clear">Clear</button> <br>
    <label> <input type="checkbox" value="01" class="box">Jan</label>
    <label> <input type="checkbox" value="02" class="box">Feb</label>
    <label> <input type="checkbox" value="03" class="box">Mar</label>
    <label> <input type="checkbox" value="04" class="box">Apr</label>
    <label> <input type="checkbox" value="05" class="box">May</label>
    <label> <input type="checkbox" value="06" class="box">Jun</label>
    <label> <input type="checkbox" value="07" class="box">Jul</label>
    <label> <input type="checkbox" value="08" class="box">Aug</label>
    <label> <input type="checkbox" value="09" class="box">Sep</label>
    <label> <input type="checkbox" value="10" class="box">Oct</label>
    <label> <input type="checkbox" value="11" class="box">Nov</label>
    <label> <input type="checkbox" value="12" class="box">Dec</label>
    <input type="text" value="" id="limitYear" size="5">
</div>

<pre id="debug"></pre>

</body>
</html>