Hi Sony,

There are two ways to go about it, using a usercontrol or creating a class that inherits from AbstractDataEditor.

The usercontrol is a bit easier but does not allow you to store prevalues (settings).  Settings might be useful in your case depending on where you are reading the checkbox options from.  If it's from nodes under the current node for instance, you can easily list the children...but if it's from a completely unrelated node it would be beneficial to have a setting called "start node id" similar to Ultimate Picker.  Otherwise you'd have to hardcode the nodeID in the code.

Here are some tutorials on each method, along with downloadable source code:

Creating custom umbraco datatypes revisited   (AbstractDataEditor)
Creating custom datatypes using the umbraco usercontrol wrapper

There are also some on umbraco.tv (see a few under Data Editors):  http://umbraco.tv/help-and-support/video-tutorials/developing-with-umbraco

In your control you would use the Document API to add the documents to a checkbox list or however you wanted to render them, something like:

using umbraco.cms.businesslogic.web;

Document d = new Document(startnodeid);    // or Request.QueryString["id"] for the current node
foreach (Document childDoc in d.Children) {
    // add to a checkbox list or other control/literal
    // id of document: childDoc.Id;   name of document: childDoc.Text;
    // get properties, such as your image, like childDoc.getProperty("yourPropertyAlias").Value.ToString()
}

Not sure if you can use images with a CheckBoxList, you might have to do your own implementation of that.

You might also have a look at the source for the RadioButtonListWithImages from uComponents, as it's pretty similar to what you are doing, except it reads the choices from prevalues.  http://ucomponents.codeplex.com/SourceControl/changeset/view/71319#1411268

Hopefully this will get you started...let us know how you get along

-Tom