cheakbox css problem

See more:

C#

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <pre lang="CSS"><style type="text/css">
        input[type=checkbox]
        {
            display: none;
        }
        
        .ds_top ul li a, .ds_top ul li a.unchecked
        {
            cursor: pointer;
            display: block;
            float: left;
            font-size: 10px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            text-decoration: none !important;
        }
        
        .ds_top ul li a.checked
        {
            background: #aac2c9; /* Old browsers */
            background: -moz-linear-gradient(top,  #aac2c9 0%, #eff7f8 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aac2c9), color-stop(100%,#eff7f8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #aac2c9 0%,#eff7f8 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #aac2c9 0%,#eff7f8 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #aac2c9 0%,#eff7f8 100%); /* IE10+ */
            background: linear-gradient(top,  #aac2c9 0%,#eff7f8 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aac2c9', endColorstr='#eff7f8',GradientType=0 ); /* IE6-9 */
            cursor: pointer;
        }
    </style>
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
            www.asp.net</a>.
    </p>
    <p>
         <asp:CheckBoxList ID="CheckBoxList2" runat="server" RepeatLayout="UnorderedList">
            <asp:ListItem>
           
            <a href="javascrupt:void(0);" style="display:none" class="checked">
                <img src="image/cut2_round_out.gif" alt="Round" /></a>
            <a href="javascrupt:void(0);">
                <img src="image/cut2_round_over.gif" alt="Round" class="unchecked" /></a>
                
            
            </asp:ListItem>
        </asp:CheckBoxList>
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>

now in this above code...i can not perform cheak uncheak of cheakboxlist...
here ...i wnt lyk if i cheak the cheakbox den my image ll b "round_out.gif" and if i uncheak the cheakbox den my image ll b "round_over.gif"
how can i do it?