Multiple checkbox toggle class

Multiple checkbox toggle class

Hello,

I hope someone can help. I have some jQuery code to add and remove a class to toggle an image. It works for one but now I want it to work if I add other checkboxes. Currently all the checkboxes change the 1st div. I would like to make it toggle it's respective div. Any help would be great!


Thanks in advance! 
  1. <html>
    <head>
     <title>jquery to Show/Hide a Div</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){

     $("input").removeAttr("checked");
     

     $("input").click(function(){


     if ($(this).is(":checked"))
     {
     $("#action").addClass("clipped");
     }
     else
     { 
     $("#action").removeClass("clipped");
     }
     
     
     });
     
     });
     </script>
    <style type="text/css">
    #checkme { float:left;}
    #action { float:left;}
    .clip {
    background:transparent url(http://download3.coupons.com/7/19/7125/1450/print.coupons.com/CouponWeb/Themes/CM_BigBlue/_images/clip.gif) no-repeat scroll 0 0;height:24px;margin:0;text-indent:-9999px;width:75px;}
    .clipped {background-position:0 -24px;}
     </style>
    </head>
    <body>
     <form>
     <div style="width:196px;">
     <input id="checkme" type="checkbox" /><div id="action" class="clip"></div>
     <input id="checkme" type="checkbox" /><div id="action" class="clip"></div>
     <input id="checkme" type="checkbox" /><div id="action" class="clip"></div>
     <input id="checkme" type="checkbox" /><div id="action" class="clip"></div>
     </div> 
     </form>
    </body>
    </html>