Why not work javascript code for check ckeckboxes?

I have work with inbox messages. I use this template for example inbox. And in that inbox have HTML button code with check all messages checkbox:

<div class="btn-group navbar-btn">
   <button type="button" class="btn btn-default btn-icon btn-checkbox-all">
      <input type="checkbox" onClick="selectAll(this)" class="styled">
   </button>
</div>

And in div block inside table have message list:

<div class="table-responsive">
    <table class="table table-inbox">
        <tbody data-link="row" class="rowlink">
            <tr class="unread">
                <td class="table-inbox-checkbox rowlink-skip">
                    <input type="checkbox" class="styled" name="messages[]">
                </td>
                <td class="table-inbox-message">
                    <span class="table-inbox-subject">Subject 1</span>
                    <span class="table-inbox-preview">Message text 1</span>
                </td>
                <td class="table-inbox-time">
                    11:09 pm
                </td>
            </tr>
            <tr class="unread">
                <td class="table-inbox-checkbox rowlink-skip">
                    <input type="checkbox" class="styled" name="messages[]">
                </td>
                <td class="table-inbox-message">
                    <span class="table-inbox-subject">Subject 2</span>
                    <span class="table-inbox-preview">Message text 2</span>
                </td>
                <td class="table-inbox-time">
                    09:09 pm
                </td>
            </tr>
        </tbody>
    </table>
</div>

I have simple javascript code for check all checkboxes:

<script language="JavaScript">
    function selectAll(source) {
        checkboxes = document.getElementsByName('messages[]');
        for(var i in checkboxes)
            checkboxes[i].checked = source.checked;
    }
</script>

Javascript code not work for check messages inside of table. Why not work code? But In sample code work for check:

<input type="checkbox" onClick="selectAll(this)" />Select All
<ul>
        <li><input type="checkbox" name="messages[]" value="red" />Red</li>
        <li><input type="checkbox" name="messages[]" value="blue" />Blue</li>
        <li><input type="checkbox" name="messages[]" value="green" />Green</li>
        <li><input type="checkbox" name="messages[]" value="black" />Black</li>
</ul>

<script language="JavaScript">
        function selectAll(source) {
                checkboxes = document.getElementsByName('messages[]');
                for(var i in checkboxes)
                        checkboxes[i].checked = source.checked;
        }
</script>