<div class="row" th:each="bytesaver : ${bytesaverList}">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">
            <h2 th:text="${bytesaver.name}">Bytesaver 1</h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <div>
                <table class="table table-bordered">
                    <thead>
                        <th>
                            <input type="checkbox" class="form-control flat" name="checkBoxByteSaver" th:value="${bytesaver.name}"/>
                            Select All
                        </th>
                    </thead>
                </table>
            </div>

        </div>
        <!-- x_content -->
    </div>
    <!-- x_panel -->
</div>
<!-- available IP List -->

$(document).ready(function() {

var selectAllBoxs = document.getElementsByName("checkBoxByteSaver");
console.log("total element count: "+selectAllBoxs.length)
for (var i = 0; i < selectAllBoxs.length; i++) {
    //selectAllBoxs[i].change(selectAll);
    console.log("Value: "+selectAllBoxs[i].value +" boolean: "+selectAllBoxs[i].addEventListener);

        selectAllBoxs[i].addEventListener ("CheckboxStateChange", selectAll, false);

}
}

function selectAll(){
    console.log("Select All pressed");
}

selectAllBoxs[i].addEventListener( 'change', function() {
        if(selectAllBoxs[i].checked) {
            console.log("Some checkbox is selected. Value: "+selectAllBoxs[i].value);
        } else {
            // Checkbox is not checked..
            console.log("Some checkbox is unselected. Value: "+selectAllBoxs[i].value);
        }
    });

if (selectAllBoxs[0].addEventListener) {
    for (var i = 0; i < selectAllBoxs.length; i++) {
       selectAllBoxs[i].addEventListener("change", selectAll, false);
     }
    } else if (selectAllBoxs[0].attachEvent) {
     for (var i = 0; i < selectAllBoxs.length; i++) {
       selectAllBoxs[i].attachEvent("onchange", selectAll);
     }
    }