Question

我有一张复选框表：

<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

非常感谢任何帮助。

感谢您的时间。

Answer 1

将() =>替换为function()，演示：

＆＃13;

$("#linkUpdate").on('click', function() {
    let selectedLinks = [];
    $("input:checkbox:checked").each( function()  {
        selectedLinks.push($(this).val());
    });
    console.log(selectedLinks);
});

＆＃13;

<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>

＆＃13;

从复选框表中获取值

1 个答案: