it's my way to customize checkbox... I have a span with background and hidden checkbox element

HTML code:

<table class="niceTable referals">
<thead>
<!-- some code -->
</thead>
<tbody>
<tr class="odd">
<td class="checkbox-column">
<span class="niceCheck">
<input class="select-on-check" value="846" id="product-grid_c0_0" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td>
</tr>
<tr class="even">
<td class="checkbox-column"><span class="niceCheck">
<input class="select-on-check" value="847" id="product-grid_c0_1" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td></tr>
<tr class="odd">
<td class="checkbox-column"><span class="niceCheck">
<input class="select-on-check" value="848" id="product-grid_c0_2" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td>
</tr>
</tbody>
</table>

css:

.niceCheck {
width: 18px;
height: 18px;
display: inline-block;
cursor: pointer;
background: url(../images/chck.png);
margin-top: -2px;
position: relative;
top: 4px;
}

.niceCheck input {
display: none;
}

and my script

/*Nice checkboxes*/
$(document).ready(function() {
    $(".niceCheck").live( 'click',
        /* при клике на чекбоксе меняем его вид и значение */
        function() {
            changeCheck(jQuery(this));
        });

    $(".niceCheck").each(
        /* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
        function() {
            changeCheckStart(jQuery(this));
        });
});

/**
  * функция смены вида и значения чекбокса
  * el - span контейнер дял обычного чекбокса
  * input - чекбокс
  */
function changeCheck(el, event){
    var input = el.find("input");//.eq(0);
  
    alert('value = '+input.attr('value')+' checked='+input.prop("checked"));
  
    if (!input.is(":checked")) {
        el.css("background-position", "0 -18px");

        input.prop("checked", "checked")
    } else {
        el.css("background-position", "0 0");
        input.removeAttr('checked');
    }
    return true;
}

function changeCheckStart(el){
    var input = el.find("input").eq(0);
    if (input.prop("checked")) {
        el.css("background-position", "0 -18px");

//        input.attr("checked", "checked" );
    }
    return true;
}

when i first time click on checkbox it works good. But when i click on the second input alert is "value = 846 checked=false"... When you click second time on the same checkbox it works. I try use .attr and .prop but have same result