如何使用javascript/jQuery检查所有ASP CheckBoxList项

本文关键字：ASP CheckBoxList 检查 何使用 javascript jQuery | 更新日期: 2023-09-27 18:27:43

你能帮我吗？

我有一个ASP RadioButtonList，里面有两个列表项；全选和取消全选。

单选按钮列表，选择全部或取消选择全部

我还有一个ASP CheckBoxList，它是数据库绑定的。当选择"全选"按钮时，我需要选中复选框上的所有项目，如果选择"取消全选"，我需要取消全选。

我正在使用javascript。

<script type="text/javascript">
    $(document).ready(function () {
        var select = $(".radio-set").find("input:checked").val();
        $('#<%=rdSelectContractor.ClientID %>').change(function () {
            if (select = "0") {
                $('.check_set_contractor').each(function () {
                    $(this).closest('table').find('input[type=checkbox]').prop('checked', true);
                });
            }
            else if (select = "1") {
                $('.check_set_contractor').each(function () {
                    $(this).closest('table').find('input[type=checkbox]').prop('checked', false);
                });
            }
        });
    });
</script>

我的收音机按钮列表

<asp:RadioButtonList ID="rdSelectContractor" runat="server" CssClass="radio-set">
          <asp:ListItem Value="0">Select All</asp:ListItem>
          <asp:ListItem Value="1">UnSelect All</asp:ListItem>
      </asp:RadioButtonList>

我的复选框列表

<asp:CheckBoxList ID="ContractorId" runat="server" RepeatDirection="Horizontal" RepeatColumns="6" CssClass="check_set_contractor"></asp:CheckBoxList>

非常感谢

如何使用javascript/jQuery检查所有ASP CheckBoxList项

首先，您需要处理单选按钮的更改事件，如下所示：

$(document).ready(function() {
  $('input[name="rdSelectContractor"]').change(function() {
    var selectedValue = $(this).val();
    var allCheckBoxes = $('.check_set_contractor');
    if (selectedValue == 0) {
      allCheckBoxes.prop("checked", true);
    } else if (selectedValue == 1) {
      allCheckBoxes.prop("checked", false);
    }
  });
});

我看到你的代码有一些问题，你依赖于.radio-set类，asp.net服务器控件将其渲染为html应用于html表，这可能会产生意想不到的结果。接下来，您将循环浏览围绕您的复选框列表的表。

相反，你可以这样做：-

$(document).ready(function () {
    $('input[name="rdSelectContractor"]').change(function () {
        var selectedValue = $(this).val();
        var ContractorIdCheckbox = $('input[name^="ContractorId"]');
        if (selectedValue == 0) {
             ContractorIdCheckbox.prop("checked", true);
        }
        else if (selectedValue == 1) {
             ContractorIdCheckbox.prop("checked", false);
        }
     });
});

我认为您的代码的基本结构有点混乱。

此外，您忘记添加COMPARISION OPERATOR '=='并使用了'='

此外，如果单选按钮是checked/unchecked，则需要检查true/false，不需要其值，因此不要使用.val()

基于你的问题，我提供了一把根据你的需要工作的小提琴。

由于jsfiddle上的ASP.NET控件不可用，我假设了示例控件，但您可以根据ASP.NET需求轻松更改ID和类。

你可以把它做得像我的小提琴一样短而甜。

FIDDLE

相关文章：