Question

I am starting to learn HTML5 and CSS (with Jquery Mobile), and because I do not have much background in this area, I am stuck at something very easy.
I want to put a checkbox in a listview (at each li).
How can I do it in order to look like that :
http://a4.mzstatic.com/us/r1000/095/Purple/ff/1d/33/mzl.ecpvufek.320×480-75.jpg
(I mean that the checkbox is at the left of the others text and all).

For the moment, my code is : http://jsfiddle.net/AzN7S/
And as you can see the checkbox is above the text, and even with a div with a float:left in the second li, it doesn’t work 🙁

Can you help me please ?
Thank you very much beforehand for your answer, and sorry for my english ^^

Have a great day.

Olivier.

EDIT :

I finally succeeded in adding a checkbox at the left of the the right part.
I updated my example : http://jsfiddle.net/AzN7S/2/
I do not know if it is the right method, but it works 🙂

Answer 1

i rethought my old answer and re did the issue especially to fit the mvc 4 framework but the client side is all the same.
so lets start:
if you just want the html you can get it here
this link is to a 3 parts checkbox list, the checkbox, the link to the item and the info popup:

Here is the link to jsfiddle for working listview with checkbox AND icon

iv added at the end some 2 parts listbox and a single part, for any questions let me know.

now for the controller all you need to do is

[Authorize]
public ActionResult Items(string act, 
    string tab, string search_by, string search, string sort, string sortdir, int? page, int? resultsPerPage,
    List<int> selected, int? projectId, string username)
{
    if (act == "AddItemsToUser")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Added:";
            foreach (var item in selected)
            {
                try
                {
                    if (username != null)
                        if (UserItemRecordModel.InsertUserItem(username, item, null, null, 0, null, null))
                            response += item + " - inserted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "AddItemsToProject")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Added:";
            foreach (var item in selected)
            {
                try
                {
                    if (projectId != null)
                        if (ProjectItemRecordModel.InsertProjectItem(projectId.ToString(), item, null, null, 0, null, null))
                            response += item + " - inserted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "RemoveItemsFromUser")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Removed:";
            foreach (var item in selected)
            {
                try
                {
                    if (UserItemRecordModel.DeleteUserItem(username, item))
                        response += item + " - deleted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "RemoveItemsFromProject")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Removed:";
            foreach (var item in selected)
            {
                if (ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(), item))
                    response += item + " - deleted, ";
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }

    List<ItemRecordModel> items = ItemRecordModel.GetSensors(search_by, search, sort, sortdir);
    return View("Items", new AdminRecordsViewModel() { Records = items });
}

this was my old answer:
i solved your problem you need to change some stuff but you can accomplish a searchable listview with checkbox like so:

jsfiddle example:

---

basic:
basic jsfiddle version

nicer version:
nicer version

jquery mobile listview with checkbox and icon or image