Hi guys,

I'm trying to display the values of different checkboxes in a div and then beside the values there is an X which when clicked deletes the value from the list. So far I've managed to do all this, however when the user clicks on the X I can't get the checkbox related to the value to uncheck?

This is what i've got so far -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<style type="text/css">
a, a:active, a:visited {
    color: red;
}
</style>

</head>

<body>
<input type="checkbox" class="mainlist" value="test"/>
<input type="checkbox" class="mainlist" value="test2"/>
<input type="checkbox" class="mainlist" value="test3"/>
<input type="checkbox" class="mainlist" value="test4"/>
<input type="checkbox" class="mainlist" value="test5"/>
<input type="checkbox" class="mainlist" value="test6"/>
<div id="results"></div>

<script type="text/javascript">


  $(":checkbox").change(function() {
         if(this.checked) {
        $('#results').append('<div><a href="#" class="item">X</a> ' + $(this).val() + '</div>');
        
       };
    }); 
    $(document).on('click','.item',function(){
        $(this).parent().remove();
            $("input.mainlist").attr("checked", false);
    });


$("input[type=checkbox][class=mainlist]").click(function() {

  var unt = $("input[type=checkbox][class=mainlist]:checked").length >= 5;     
    $("input[type=checkbox][class=mainlist]").not(":checked").attr("disabled",unt);

});

</script>

</body>

</html>
Also I want to limit the amount of checked checkboxes to 5 - which i've also managed to do by disabling the remaining checkboxes.