javascript - 如何设置复选框值等于Javascript对象

Question

我想为列出的每个项目添加复选框，我使用每个循环来渲染列表，因此，当我选中该特定列表项目的复选框并移动到购物车时，我想将该项目对象作为值复选框。

{{#each list}}
    <input type="checkbox" name="list" >
    <p>{{this.title}}</p>
{{/each}}
<button class="btn btn-primary" id="addToCart" >ADD TO CART</button>

现在，当我单击按钮时，我希望它返回选中复选框的对象(即，当选中列表项 1 时，单击按钮应返回列表项 1，依此类推...)

注意:我想将复选框的值设置为等于列表项对象。

Answer 1

您需要将复选框的值设置为列表中项目的某个唯一标识符:

{{#each list}}
  <input type="checkbox" name="list" value="{{this.id}}" id="{{'list' + this.id}}" />
  <label for="{{'list' + this.id}}">{{this.title}}</label>
{{/each}}

(使用标签而不是段落允许用户单击文本来选择或取消选择复选框，无需任何 JavaScript)

然后您可以在按钮触发的调用中使用以下代码来获取所有选中的复选框的列表:

$.each($("input[name='list']:checked"), function() {
  //push the items to list or whatever you want
});

<小时/>

您可以尝试将整个对象设置为复选框值，但我没有尝试过，也不知道影响:

<input type="checkbox" name="list" value="{{this}}" id="{{'list' + this.id}}" />