列出带有复选框的js

Question

我在 html 列表中使用 List js 复选框并尝试用值对象填充它，如 :

var values = [
  {
    id: 12,
    action: 'a',
...
  },
  {
    id: 13,
    action: 'b',
...
  }
];

HTML :

<div id="users">
  <ul class="list">
    <li>
      <span class="id"></span>
      <span class="action"></span >
      <input class="required" type="checkbox">Required
    </li>
  </ul>

</div>

并初始化为：

new List('users', options, values);

如何让它发挥作用？

只是为了澄清我缺少如何完成值对象以及如何定义选项对象以便我可以最初初始化复选框的检查状态。

Answer 1

创建一个 options 变量并添加具有其他属性名称的对象 { name: 'required', attr: 'checked'}。将 options 作为参数传递给创建的新列表。

更新：

根据您的评论，我认为使用 list.js 是不可能的，如果您愿意将 Jquery 添加到您的应用程序中，这是一个您可以加入的小技巧。

创建列表后，将 $("input[checked='false']").prop('checked', false); 添加到您的代码中。

注意：您想要异步添加上面的行，一旦整个列表被填充，以防您正在处理大量数据。

演示 -

var options = {
  valueNames: ['id', 'action', {
    name: 'required',
    attr: 'checked'
  }],
  item: 'user-item'
};

var values = [{
    id: 12,
    action: 'a',
    required: false
  },
  {
    id: 13,
    action: 'b',
    required: true
  }
];

var userList = new List('user-list', options, values);

//Once the entire list is populated, set all checked='false' checkboxes to unchecked state.
$("input[checked='false']").prop('checked', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="user-list">
  <ul class="list"></ul>
</div>

<div style="display:none;">
  <!-- A template element is needed when list is empty, TODO: needs a better solution -->
  <li id="user-item">
    <span class="id"></span>
    <span class="action"></span >
    <input class="required" type="checkbox" />Required
  </li>
</div>

列出带有复选框的js

list js with checkboxes

javascript

checkbox

listjs