select user icon on click
<p>I am creating a user registration form, and there is an option to select avatar icon for user and for that I am using following code...</p>

<pre><code> &lt;ul class="icons clearfix"&gt;
     &lt;li&gt;&lt;img src="images/123456.jpg" title="123456" alt="123456" width="34" height="34" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="images/654321.jpg" title="654321" alt="654321" width="34" height="34" /&gt;&lt;/li&gt;
 &lt;/ul&gt;
</code></pre>

<p></p>

<p>and following jquery code...</p>

<pre><code>$(document).ready(function(){
    $('ul.icons li').click(function() {
        $(this).removeClass('selected');
        $(this).addClass('selected');
        var selected_img = $('img',this).attr('alt');
        $('.avatar').val(selected_img); 
    });

});
</code></pre>

<p>First of all, is my approach correct? And it should remove selected class from <code>li</code> element if user clicks again on any other image and avatar image should be updated accordingly. Thanks.</p>
