Checkbox Column in Listview Widget of jQuery Mobile

Question

I am trying to accomplish something like this using jQuery Mobile.

How can I add a column of checkboxes to the Listview widget?

Answer 1

Setup your list view as a regular split listview, then add a DIV for the checkbox and place it with some CSS:

<ul class="has-listCheck" data-role="listview" data-split-icon="info" data-split-theme="d">
  <li>
    <a href="#">
      <h3>Line Item 1</h3>
      <p>Sub title 1</p>
    </a>
    <a href="#"></a>
    <div class="listCheck">
      <label>
        <input type="checkbox">
      </label>
    </div>
  </li>
</ul>


.has-listCheck > li > a:first-child {
  margin-left: 40px !important;
}

.has-listCheck >li.ui-last-child > .listCheck {
  border-bottom: 1px solid rgb(221, 221, 221);
}

.listCheck {
  position: absolute;
  top: 0px;width: 40px;bottom: 0px;z-index: 100;
  border-top: 1px solid rgb(221, 221, 221);
  border-right: 1px solid rgb(221, 221, 221);
  background-color: rgb(246, 246, 246);
}

.listCheck .ui-checkbox,
.listCheck .ui-checkbox label {
  position: absolute;
  top: 0px;bottom: 0px;right: 0px;left: 0px;padding: 0;margin: 0;
}

.listCheck input {
  display: none;
}

.listCheck label {
  background-image: none;
  background-color: transparent;
  border: 0;
}

DEMO