ListBox和CheckBoxList,在没有for循环的情况下警告所选项目

时间:2012-07-26 07:20:56

标签: jquery

我得到了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);
                    }
                }
            }
        );
    }
);

由于

1 个答案:

答案 0 :(得分:0)

您可以使用.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);
                    }
                }
            }
        );
    }
);