javascriptjqueryjquery-mobilejquery-mobile-listview

Checkbox Column in Listview Widget of jQuery Mobile


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

enter image description here

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


Solution

  • 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