我有一张复选框表：
<div>
<h1 class="text-center">Link activities</h1>
<div class="row">
<div class="col"></div>
<div class="col-md-8 col-lg-8">
<h3>Link activities to txn/events</h3>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Txn/event</th>
</tr>
<tr>
<th>Activity</th>
<th class="text-center" style="background-color: khaki">Click & Collect</th>
<th class="text-center" style="background-color: khaki">Delivery</th>
<th class="text-center" style="background-color: khaki">Walk-in</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="background-color: #eed3d7">Till</th>
<td class="text-center"><input type="checkbox" aria-label="Till/C&C" value="Till/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Till/Del" value="Till/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Till/Walk" value="Till/Walk" /></td>
</tr>
<tr>
<th scope="row" style="background-color: #eed3d7">Delivery</th>
<td class="text-center"><input type="checkbox" aria-label="Del/C&C" value="Del/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Del/Del" value="Del/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Del/Walk" value="Del/Walk" /></td>
</tr>
<tr>
<th scope="row" style="background-color: #eed3d7">Pick</th>
<td class="text-center"><input type="checkbox" aria-label="Pick/C&C" value="Pick/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Pick/Del" value="Pick/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Pick/Walk" value="Pick/Walk" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-md-8 col-lg-8 align-self-center text-right">
<button type="button" class="btn btn-secondary">Cancel</button>
<button type="button" class="btn btn-primary" id="linkUpdate">Update</button>
</div>
<div class="col"></div>
</div>
</div>
我要做的是使用更新按钮获取使用jQuery选中的所有复选框的值。我目前使用的代码是：
$("#linkUpdate").on('click', () => {
let selectedLinks = [];
$("input:checkbox:checked").each(() => {
selectedLinks.push($(this).val());
});
console.log(selectedLinks);
});
然而，这目前给我一个错误：
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at jQuery.fn.init.val (jquery.js?ae28:7935)
at HTMLInputElement.eval (project.js?9e26:21)
at Function.each (jquery.js?ae28:362)
at jQuery.fn.init.each (jquery.js?ae28:157)
at HTMLButtonElement.eval (project.js?9e26:20)
at HTMLButtonElement.dispatch (jquery.js?ae28:5206)
at HTMLButtonElement.elemData.handle (jquery.js?ae28:5014)
因此。我的问题分为两部分：
1）在按下“更新”按钮之前，是否需要设置复选框的状态？
2）当我按下“更新”按钮时，如何获取已选中复选框的值？
我正在使用Bootstrap version 4.0.0-alpha.6和jQuery version 3.2.1
非常感谢任何帮助。
感谢您的时间。
答案 0 :(得分：3)
将() =>替换为function()，演示：
$("#linkUpdate").on('click', function() {
let selectedLinks = [];
$("input:checkbox:checked").each( function() {
selectedLinks.push($(this).val());
});
console.log(selectedLinks);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h1 class="text-center">Link activities</h1>
<div class="row">
<div class="col"></div>
<div class="col-md-8 col-lg-8">
<h3>Link activities to txn/events</h3>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Txn/event</th>
</tr>
<tr>
<th>Activity</th>
<th class="text-center" style="background-color: khaki">Click & Collect</th>
<th class="text-center" style="background-color: khaki">Delivery</th>
<th class="text-center" style="background-color: khaki">Walk-in</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="background-color: #eed3d7">Till</th>
<td class="text-center"><input type="checkbox" aria-label="Till/C&C" value="Till/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Till/Del" value="Till/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Till/Walk" value="Till/Walk" /></td>
</tr>
<tr>
<th scope="row" style="background-color: #eed3d7">Delivery</th>
<td class="text-center"><input type="checkbox" aria-label="Del/C&C" value="Del/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Del/Del" value="Del/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Del/Walk" value="Del/Walk" /></td>
</tr>
<tr>
<th scope="row" style="background-color: #eed3d7">Pick</th>
<td class="text-center"><input type="checkbox" aria-label="Pick/C&C" value="Pick/C&C" /></td>
<td class="text-center"><input type="checkbox" aria-label="Pick/Del" value="Pick/Del" /></td>
<td class="text-center"><input type="checkbox" aria-label="Pick/Walk" value="Pick/Walk" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-md-8 col-lg-8 align-self-center text-right">
<button type="button" class="btn btn-secondary">Cancel</button>
<button type="button" class="btn btn-primary" id="linkUpdate">Update</button>
</div>
<div class="col"></div>
</div>
</div>