【问题标题】：Checkbox Column in Listview Widget of jQuery MobilejQuery Mobile 的 Listview 小部件中的复选框列
【发布时间】：2016-08-18 02:40:49
【问题描述】：

我正在尝试使用 jQuery Mobile 来完成类似的事情。

如何向 Listview 小部件添加一列复选框？

【问题讨论】：

标签： javascript jquery jquery-mobile jquery-mobile-listview

【解决方案1】：

将您的列表视图设置为常规拆分列表视图，然后为复选框添加一个 DIV 并使用一些 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

【讨论】：