使用 JavaScript 或 JQuery 在按下按钮时自动检查 asp:checkbox

Question

我有一个功能，允许用户在数据库中搜索与他们输入的字符串相匹配的项目。例如，如果他们输入 "Superman"，它会 return 无论是什么在与超人相关联的数据库中。结果列表中的每个项目旁边都有一个复选框。如果用户 select 有一个复选框，他们可以按 "delete" 按钮从他们的列表中删除该项目。我希望能够通过按 "select all" 按钮 select 所有复选框。有时列表真的很长，如果用户想要删除所有项目，select 并逐个删除每个项目会很耗时。

复选框是 asp:TemplateField 内的 asp:checkbox。 asp:TemplateField 在 asp:GridView 中。这是复选框代码：

<asp:TemplateField HeaderText="Select">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="uxSelectAdd"     runat="server" />
                                    </ItemTemplate>

对于 "select all" 按钮，我使用的是常规输入类型：

<input type="submit" value="Select All" id="uxSelectAll" />

这是我在我的资源文件夹中使用的js文件的内容（我正在使用警报功能进行调试。由于某种原因，警报会在页面加载时弹出，而不是在我单击时弹出在按钮上。单击按钮不会执行任何操作):

 $(document).ready(function () {
    $('#uxSelectAll').click(function (e) {
        $(searchCheckBoxSelector).prop('checked', true);
        alert("helloooo");
    });
});

这是包含在脚本标签内顶部前端代码中的js：

<script type="text/javascript">
        var searchCheckBoxSelector = '#<%=uxSearchedComics.ClientID%>     input[id*="uxSelectAdd"]:checkbox';
    </script>

我知道 .live 不好，因为它已在我们现在使用的 javascript 版本中删除，所以我尝试将 .live 更改为 .click。那没有用。我还尝试将这个 js 添加到前端而不是已经存在的东西，只是为了试验看看是否可行：

<script type="text/javascript">
        $(document).ready(function () {
            $('#uxSelectAll').click(function () {
                alert('hello world');
            });
        });
    </script>

出于某种原因，这也不起作用。我错过了一些明显的东西吗？在我尝试添加代码为我检查所有复选框之前，我至少想得到一个警报，但警报甚至都不起作用。我将不胜感激在正确方向上的任何帮助或推动。

以下是我在前端代码中使用的 .js 文件：

<script src="../../../../resources/js/ItemSlotEdit.js" type="text/javascript"></script>
<script src="../../../../resources/js/plugins/jquery-1.11.0.js" type="text/javascript"></script>

Answer 1

我想分享我正在使用的解决方案。我一直保持输入元素完全相同，这个解决方案位于一个单独的 js 文件中，我已将其包含在 .aspx 前端文件中。

$(document).ready(function () {
    $('#body').on('click', 'input[type=submit]#uxSelectAll', function () {
        $(this).toggleClass("checked");
        var isChecked = $(this).hasClass("checked");
        $('input[type=submit]#uxSelectAll').val(isChecked ? "Unselect All" :  "Select All");
        $(this).prev().find(":checkbox").prop("checked", isChecked);
        return false;
    });
});

之前该按钮不起作用的原因是该按钮位于页面加载时不存在的 div 中。 div 在用户单击搜索按钮并且搜索结果出现后出现。搜索结果填充到动态显示的 div 中。因此，为了访问按钮，您需要在选择器中包含一个父容器。否则事件委托不会通过。我使用#body 容器是因为我只有一个 Select All 按钮和一个复选框，所以它不会与任何内容发生冲突。 toggleClass 函数在每次单击时交替提供和删除 "checked" class，您可以使用 .val 属性修改输入元素的文本。

我希望这对某人有所帮助。

使用 JavaScript 或 JQuery 在按下按钮时自动检查 asp:checkbox

Using JavaScript or JQuery to automatically check asp:checkbox when a button is pressed

javascript

checkbox

jquery

binding

event-delegation