Loop Through Checkboxes to addEventListener to each box

I am trying to add an event listener to each checkbox as an alternative to the onclick method. The code I am working with is simple.

The code can be seen here:

http://ift.tt/2t3Lwpw

or here Javascript:

function letter() {
 document.getElementById("display").innerHTML = "ABCD";
 }

var box = document.getElementsByName("test");
if (box[0].addEventListener) {
for (var i = 0; i < box.length; i++) {
   box[i].addEventListener("change", letter, false);
 }
} else if (box[0].attachEvent) {
 for (var i = 0; i < box.length; i++) {
   box[i].attachEvent("onchange", letter);
 }

The HTML is:

<div>
<label><input type="checkbox" name="test" value="A">A</label>
<label><input type="checkbox" name="test" value="B">B</label>
<label><input type="checkbox" name="test" value="C">C</label>
<label><input type="checkbox" name="test" value="D">D</label>
</div>