无法触发模态 window 内的复选框

Question

I have webpage where on clicking a button, modal window opens and in that window there is a table containing 3 columns. 1 for links, 2nd for share and 3rd for delete. 2nd and 3rd column only contains checkbox as defined by <td><input style="width:1em;" type="checkbox" id="checkbox"/>&nbsp;</td><td><input style="width:1em;" type="checkbox" id="checkbox"/>&nbsp;</td> .

I wrote a script something like this:

            $("#checkbox").click(function(){
                console.log("Checkbox clicked");
            })

I updated the scripts which now works fine but there is still one problem:

            $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($('#checkbox').is(':checked') == true) {
                    value = $('#checkbox').attr('data-sid');
                    console.log(value);
                }             else if ($('#checkbox').is(':checked') == false) {
                    // value = $('#checkbox').attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })

Below is the modal window:

<div class="modal fade" id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content showLink-modal">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Links associated with Group</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body grid-container">
                <div class="row g-0 justify-content-center">
                    <div class="col-sm-6 link-input-here">
                        <input type="text" class="showLink-modal-gp-name" value="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="show-groupLinks">
                            <thead>
                                <tr class="header">
                                    <th>No.</th>
                                    <th>Links</th>
                                    <th>Share</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody class="showLink-table"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-ftr">
                <button type="submit" class="button-box" id="footer-btn">Save</button>
            </div>
        </div>
    </div>
</div>

Here <tbody> is empty as I am creating its child elements(which contains input field for checkbox) in success:function() through ajax . Many rows are generated and each row has 2 checkboxes. I am now getting the boolean value true or false from only first checkbox that is first row and first checkbox. If I press the other checkboxes, it doesn't gets selected and I get "CANT SELECT THE CHECKBOX" every time from the console. What is happening here?

Answer 1

Use Event Delegation as below:

 $(document).on('click', '#checkbox', function () { console.log("Checkbox clicked"); })

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4;1/js/bootstrap.min:js"></script> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalGroupLinks">Open Modal</button> <div class="modal fade" id="ModalGroupLinks" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content showLink-modal"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Links associated with Group</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body grid-container"> <div class="row g-0 justify-content-center"> <div class="col-sm-6 link-input-here"> <input type="text" class="showLink-modal-gp-name" value=""> </div> </div> <div class="row"> <div class="col-md-12"> <table class="show-groupLinks"> <thead> <tr class="header"> <th>No;</th> <th>Links</th> <th>Share</th> <th>Delete</th> </tr> </thead> <tbody class="showLink-table"> <tr> <td><input style="width:1em;" type="checkbox" id="checkbox"/>&nbsp;</td> </tr> </tbody> </table> </div> </div> </div> <div class="modal-ftr"> <button type="submit" class="button-box" id="footer-btn">Save</button> </div> </div> </div> </div>

Answer 2

I found out where the problem lies: In the script below

            $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($('#checkbox').is(':checked') == true) {
                    value = $('#checkbox').attr('data-sid');
                    console.log(value);
                }else if ($('#checkbox').is(':checked') == false) {
                    // value = $('#checkbox').attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })

In the if and else if condition $('#checkbox') needs to be replaced by the $(this) so it checks whether the clicked checkbox is checked or not. When using $('#checkbox') it gave the attribute value of the first checkbox only even if you click on the later checkboxes.

New script should look like this:

           $(document).on('click', '#checkbox', function () {
                console.log("Checkbox clicked");
                let value = "";
                if ($(this).is(':checked') == true) {
                    value = $(this).attr('data-sid');
                    console.log(value);
                }else if ($(this).is(':checked') == false) {
                    // value = $(this).attr('value', 'false1').val();
                    console.log("CAN'T SELECT CHECKBOX");
                }

            })