在每个选中的列表框上显示所选列表

本文关键字：列表 显示 | 更新日期: 2023-09-27 17:54:55

我有一个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>

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

在每个选中的列表框上显示所选列表

将脚本放入文档中。准备好确保HTML元素对脚本的可用性，并使用属性包含选择器来查找复选框列表中的复选框。

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

客户端: 

 $('.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是在复选框控件中给出的类名

可能的解决方案:

<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');
  });

试试下面的代码:

解决方案1 当您选择复选框时，一个警告将显示复选框中已选中项的值。

Javascript代码:

& lt;type = " text/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 Code: 
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>

这可能会对您有所帮助:您可以在代码后面文件以及脚本标签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);           
}
相关文章：