[melky]

А можно сделать так, чтобы знаения чекбоксов выводились не при нажатии на кнопку, а при клике на чекбокс?

вывод производится не CheckboxCollection, а другим кодом.
CheckboxCollection.collectValues вернёт массив значений - получить его можно, когда захочется. и делать с ним можно всё, что захочется

... я так понимаю, что вопрос был в стиле "а сделай, чтобы ... ", так что вот пример :

<script>
// схавает пустоту, элемент, или коллекцию элементов.
function CheckboxCollection (checkboxes) {
    this.checkboxes = checkboxes ? "nodeType" in checkboxes ? [checkboxes] : Array.prototype.slice.call(checkboxes) : [];
}

// checkboxes = [ /* чекбокс1, чекбокс2, ..., чекбоксN */ ]; <--- массив элементов.

// вернёт собранные в массив значения отмеченных чекбоксов.
CheckboxCollection.prototype.collectValues = function () {

    var i = this.checkboxes.length, buffer = [];
    
    while (i--) {
        if (this.checkboxes[i].checked) {
            buffer.push(this.checkboxes[i].value);
        }
    }
    
    return buffer;
};
</script>

<label><input type="checkbox" name="drink" value="beer" id="drink"> Пивко </label>
<br>
<input type="checkbox" name="shoes" value="bus" id="shoes"><label for="shoes"> Шина </label>
<hr>

<input id="output">

<button id="clear">Очистить</button>
<button id="fill">Заполнить</button>

<script>
// коллекция чекбоксов.
var myBoxes = new CheckboxCollection();

// чекбоксы можно добавить так.
myBoxes.checkboxes.push(document.getElementById("drink"));
myBoxes.checkboxes.push(document.getElementById("shoes"));

// куда выводим.
var output = document.getElementById("output");

// клик по кнопке "очистить"
document.getElementById("clear").onclick = function () {
    output.value = "";
};

// функция вывода.
function out () {
    output.value = myBoxes.collectValues().join(", ");
}

// обработка изменения чекбоксов.
for (var i = 0; i < myBoxes.checkboxes.length; i++) {
    myBoxes.checkboxes[i].onchange = out;
}
</script>