c# - 在每个选中的列表框上显示选择的列表框

Question

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

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

Answer 1

可能的解决方案：

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

Answer 2

这可能会对您有所帮助：您可以在文件后面的代码以及脚本标签内使用它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);           
}

Answer 3

客户端：

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

Answer 4

将脚本放入document.ready以确保 html 元素对脚本的可用性，并使用属性 contains 选择器来查找复选框列表的复选框。

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

Answer 5

试试下面的代码：

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

Javascript代码：

<脚本类型="文本/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>