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，依此类推......）

注意：我想将复选框的值设置为list item object。

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}}" />

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

1 个答案: