jQuery shows "name" instead of "value"

I have a time table with checkbox:

<table id="date">
    <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="Sun" id="sun" value="0" /></td>
        <td><input type="checkbox" name="Mon" id="mon" value="1" /></td>
        <td><input type="checkbox" name="Tue" id="tue" value="2" /></td>
        <td><input type="checkbox" name="Wed" id="wed" value="3" /></td>
        <td><input type="checkbox" name="Thu" id="thu" value="4" /></td>
        <td><input type="checkbox" name="Fri" id="fir" value="5" /></td>
        <td><input type="checkbox" name="Sat" id="sat" value="6" /></td>
    </tr>
</table>
<p><span id="dateValue"></span></p>
<button id="dateSave">Add</button>

And the jquery part:

$(function() {
    function dateValue() {
        var values = [];
        $('#date :checked').each(function () {
            values.push($(this).val());
        });

        $('#dateValue').text(values);
    }

    $(function () {
        $('#dateSave').click(dateValue);
            $('#dateValue').text(values);
    });

    $(function () {
        $('#dateDate input').click(dateValue);
            dateValue();
    });

});

When I select the checkbox and click the button, checkbox's "value" will dynamically input to <span>, but I want to show checkbox's "name" instead of "value", if I select checkbox, <span> will show "Mon,Tue,Wed,Thu"...etc, not "1,2,3,4"... How to fix my code?