无法在模态窗口内触发复选框

Question

我有一个网页，点击一个按钮，模式窗口就会打开，在那个窗口中有一个包含 3 列的表格。 1个链接，2个分享，3个删除。第 2 列和第 3 列仅包含 <td><input style="width:1em;" type="checkbox" id="checkbox"/> </td> 定义的复选框。

我写了一个类似这样的脚本：

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

我更新了现在可以正常工作的脚本，但仍然存在一个问题：

            $(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");
                }

            })

下面是模态窗口：

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

这里<tbody> 是空的，因为我在success:function() 到ajax 中创建它的子元素（其中包含复选框的输入字段）。生成了许多行，每行有 2 个复选框。我现在仅从第一行和第一个复选框的第一个复选框中获取布尔值 true 或 false。如果我按下其他复选框，它不会被选中，并且我每次都从控制台得到“CANT SELECT THE CHECKBOX”。这里发生了什么？

Answer 1

我发现问题出在哪里： 在下面的脚本中

            $(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");
                }

            })

在if 和else if 条件中，$('#checkbox') 需要替换为$(this)，因此它会检查单击的复选框是否被选中。使用$('#checkbox') 时，即使您单击后面的复选框，它也只会给出第一个复选框的属性值。

新脚本应如下所示：

           $(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");
                }

            })