在每个选中的列表框上显示列表选择的数量答案

【问题标题】：show list selected no of list box on each checked在每个选中的列表框上显示列表选择的数量
【发布时间】：2014-05-20 16:05:12
【问题描述】：

我有一个asp:CheckBoxList，它从数据库中加载项目。

我想写一个显示没有的脚本。每次检查时选中的复选框。
我的aspx页面如下：

<div id="rfd-demo-zone2" class="placeholderContent accordionEmpGroup-child-subGroup-container">
   <asp:CheckBoxList  ID="ckbList2DesignationUc" runat="Server" RepeatLayout="Flow" RepeatDirection="Horizontal" Width="100%" ></asp:CheckBoxList>          
</div>

脚本：

<script type="text/javascript">
    $('#ckbList2DesignationUc input:checked').each(function () {
        alert('hi');
    });
</script>

在上面的脚本中，我试图得到一个警报，但它没有显示

【问题讨论】：

标签： c# javascript jquery asp.net checkbox

【解决方案1】：

将脚本放入document.ready以确保html元素可用于脚本并使用attribute contains selector查找复选框列表的复选框。

<script type="text/javascript">
     $(document).ready(function(){
        $('[id*=ckbList2DesignationUc]:checked').each(function () {
            alert('hi');
        });
     });
</script>

在复选框更改时触发事件

<script type="text/javascript">
     $(document).ready(function(){
        $('[id*=ckbList2DesignationUc]').change(function () {
            alert(this.id);
        });
     });
</script>

【讨论】：

检查您是否有最新的代码以及页面加载时检查了多少个复选框？
无，实际上它是一种应用程序，其中框的选择取决于用户类型，所以我想编写一个脚本来检测选中复选框的数量并根据角色它将将其与限制进行比较，如果限制超过允许的数量，将显示弹出窗口。
添加警报($('[id*=ckbList2DesignationUc]:checked').length);到 $(document).ready(function(){ 的下一行
不工作：$(document).ready(function () { alert($('[id*=ckbList2DesignationUc]:checked').length); });
您收到警报了吗？如果没有，请检查您是否可以使用 jQuery？

【解决方案2】：

客户端：

 $('.CheckBoxList').each(function () {
           var items = new Array();
               $(this).find("input:checkbox").each(function () {
                   if ($(this).attr("checked") == true) {
                        items[items.length] = $(this).next().html();
                     }
                   });
                   $(this).parent().find('.txtList').val(items.toString());
             });

HTML 标记：

<asp:TextBox runat="server" ID="txtabc" CssClass="txtList txtformatcss" Width="160px" ViewStateMode="Disabled"></asp:TextBox>
    <asp:CheckBoxList ID="chkabc" runat="server"                                      
         RepeatLayout="Flow" CssClass="CheckBoxList">
 </asp:CheckBoxList>

这里CheckBoxList 是复选框列表控件中给出的类名

【讨论】：

【解决方案3】：

可能的解决方案：

<div id="rfd-demo-zone2" class="placeholderContent accordionEmpGroup-child-subGroup-container">
      <asp:CheckBoxList  ID="ckbList2DesignationUc" runat="Server" RepeatLayout="Flow" RepeatDirection="Horizontal" Width="100%" >
      </asp:CheckBoxList>          
 </div>

并访问它：

 $("#<%=ckbList2DesignationUc.ClientID %> input[type=checkbox]:checked").each(function() {  
      alert('checked');
  });

【讨论】：

但我如何在检查时调用警报
立即尝试，删除 this.find

【解决方案4】：

试试下面的代码：

解决方案-1 每当您选中复选框时，警报都会显示复选框中选中项目的值。

Javascript 代码：

         function itemClick(radioButton) {
             var Control;
             var selectedItems;
             selectedItems = '';
             Control = document.getElementById("<%=ckbList2DesignationUc.ClientID %>").getElementsByTagName("input");
             for (var i = 0; i < Control.length; i++) {
                 if (Control[i].checked == true)
                     selectedItems += i.toString()+',';
             }
             alert(selectedItems);
         }

</script>

ASPX 代码：

protected void Page_Load(object sender, EventArgs e)
    {
        for (int index = 0; index < 10; index++)
        {
            ckbList2DesignationUc.Items.Add(new ListItem("Item" + index, index.ToString()));
        }
        foreach (ListItem Li in ckbList2DesignationUc.Items)
        {
            Li.Attributes.Add("onclick", "return itemClick()");
        }

    }

使用 Jquery 所需的解决方案：

解决方案-2

< script type="text/javascript">

    $(document).ready(function () {
        var selectedCheckBoxes = '';
        $('#ckbList2DesignationUc').each(function () {
            var items = new Array();
            $(this).find("input:checkbox").each(function () {
                $(this).click(function () {
                    selectedCheckBoxes += $(this).val() + ",";
                    alert(selectedCheckBoxes);
                });
            });
        });

    });
< /script>

< asp:CheckBoxList  ID="ckbList2DesignationUc" runat="Server" RepeatLayout="Flow" RepeatDirection="Horizontal" Width="100%">
                < /asp:CheckBoxList>

【讨论】：

我为您的问题提供了两种解决方案。如果您的问题得到解决，请投票给答案，如果有任何问题，请告诉我。

【解决方案5】：

这可能会对您有所帮助：您可以在代码隐藏文件以及脚本标签内使用它enable AutoPostBack property of checkboxlist to true

protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
    int i=0;            
    foreach (ListItem li in CheckBoxList1.Items)
    {
        if (li.Selected)
            i++;
    }
    Response.Write(i);           
}

【讨论】：