初学JQuery的一个小问题，见代码


<script src="jquery-1.6.4.js" type="text/javascript"></script>
    <script type="text/javascript">
$(function(){
//$(":checkbox").click(function(){

//var val="";
//$(":checkbox:checked").each(function(){
//val += $(this).val()+",";  
//});
//$("#category").html("选择的数据 "+val);   
//});
(function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var val="";
$(":checkbox:checked").each(function(){
val += $(this).val()+",";  
});
$("#category").html("选择的数据 "+val);
$(":checkbox").click(checkboxclick);
})();
});
    </script>
 <form>
     <ul>
            <li>
             <input type="checkbox" name="category" value="红"/><label>红</label>
             <input type="checkbox" name="category" value="黄"/><label>黄</label>
                <input type="checkbox" name="category" value="蓝"/><label>蓝</label>
                <input type="checkbox" name="category" value="紫"/><label>紫</label>
                <input type="checkbox" name="category" value="白"/><label>白</label>
            </li>
        </ul>
    </form>
    <div id="msg">
     <p id="category"></p>
    </div>
为什么2种写法会有不同效果呢？为什么第二种声明了一个函数，就能显示"选择的数据 "，而第一种是要点击以后才能显示的。