javascript - 列出带有复选框的js

Question

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

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 添加到您的应用程序，这是一个您可以合并的小 hack。

创建列表后，将 $("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>