jquery - ListBox 和 CheckBoxList，在没有 for 循环的情况下提醒选中的项目

Question

我得到了 ASP.NET ListBox 和 CheckBoxList，并且 onchange 我必须提醒在以下代码片段中完成的选定项目，但是我想摆脱 for 循环。你能帮忙吗？

<asp:ListBox ID="ListBox1" runat="server" Width="10%" SelectionMode="Multiple">
    <asp:ListItem Selected="True" Value="1">White</asp:ListItem>
    <asp:ListItem Selected="False" Value="2">Black</asp:ListItem>
    <asp:ListItem Value="3">Red</asp:ListItem>
    <asp:ListItem Value="4">Green</asp:ListItem>
    <asp:ListItem Value="5">Blue</asp:ListItem>
</asp:ListBox>
<br />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" Width="10%">
    <asp:ListItem Selected="True" Value="1">White</asp:ListItem>
    <asp:ListItem Selected="False" Value="2">Black</asp:ListItem>
    <asp:ListItem Value="3">Red</asp:ListItem>
    <asp:ListItem Value="4">Green</asp:ListItem>
    <asp:ListItem Value="5">Blue</asp:ListItem>
</asp:CheckBoxList>

JavaScript

$(document).ready
(
    function () 
    {
        $("#ListBox1").change
        (
            function () 
            {
                for (var i = 0; i < $("#ListBox1 :selected").length; i++) 
                {
                    alert("ListBox Number of Items: " + $("#ListBox1 option").length + "\n"
                    + "ListBox Number of Selected Items: " + $("#ListBox1 :selected").length + "\n"
                    + "ListBox Value: " + $("#ListBox1 :selected")[i].value + "\n"
                    + "ListBox Text: " + $("#ListBox1 :selected")[i].text);
                }
            }
        );
    }
);

$(document).ready
(
    function () 
    {
        $("#CheckBoxList1").change
        (
            function () 
            {
                for (var i = 0; i < $("#CheckBoxList1 :input").length; i++) 
                {
                    if ($("#CheckBoxList1 :input")[i].checked) 
                    {
                        alert("CheckBoxList Number of Items: " + $("#CheckBoxList1 :input").length + "\n"
                            + "CheckBoxList Number of Checked Items: " + $("#CheckBoxList1 input:checked").length + "\n"
                            + "CheckBoxList Value: " + $("#CheckBoxList1 :input")[i].value + "\n"
                            + "CheckBoxList Text: " + $("#CheckBoxList1 label")[i].innerHTML);
                    }
                }
            }
        );
    }
);

谢谢

Answer 1

可以使用.each()循环遍历元素的方法，this在迭代中引用当前元素。

$(document).ready
(
    function () 
    {
        $("#ListBox1").change
        (
            function () 
            {
                $("#ListBox1 :selected").each(function()
                {
                    alert("ListBox Number of Items: " + $("#ListBox1 option").length + "\n"
                    + "ListBox Number of Selected Items: " + $("#ListBox1 :selected").length + "\n"
                    + "ListBox Value: " + this.value + "\n"
                    + "ListBox Text: " + this.text);
                }
            }
        );
        $("#CheckBoxList1").change
        (
            function () 
            {
                $("#CheckBoxList1 :input").each(function()
                {
                    if (this.checked) 
                    {
                        alert("CheckBoxList Number of Items: " + $("#CheckBoxList1 :input").length + "\n"
                            + "CheckBoxList Number of Checked Items: " + $("#CheckBoxList1 input:checked").length + "\n"
                            + "CheckBoxList Value: " + this.value + "\n"
                            + "CheckBoxList Text: " + this.innerHTML);
                    }
                }
            }
        );
    }
);