mardi 24 octobre 2017

Get the values from a table of checkboxes

I have a table of checkboxes:

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

What I am trying to do is use the update button to get the values of all the checkboxes that are selected using jQuery. The code I am currently using is:

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

However, this is currently giving me an error:

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)

So. my question comes in two parts:

1) Do I need to set the status of the checkbox to checked before I press the Update button?

2) How can I get the values of the checked checkboxes when I press the Update button?

I am using Bootstrap version 4.0.0-alpha.6 and jQuery version 3.2.1

Any help with this would be much appreciated.

Thanks for your time.




Aucun commentaire:

Enregistrer un commentaire