您的位置：首页 > Web前端 > JQuery

Display selected items of a checkboxlist

2012-01-18 15:42 344 查看

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#<%=CheckBoxList1.ClientID %>').click(function () {

                var str = "";

                $('#message').text(str);

                $('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function () {//Apply a jQuery selector to retrieve the checked boxes and apply the each function to each element returned

                    str = str + " " + $(this).next().text();

//                    Retrieve the text of the selected CheckBox and append to the local string

//                    Each of the checkbox elements is rendered as a <input

//                    type="checkbox"> and <label> pair. The label holds the text of the

//                    element. Hence, when retrieving the description of the element, we have

//                    used $(this).next().text(), where $(this) refers to the current

//                    checkbox element and next() refers to the consecutive <label> element.

                    $('#message').text(str); //After the execution of the each() function, display the local string in the div area 'message'

                })

            })

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:CheckBoxList ID="CheckBoxList1" runat="server">

            <asp:ListItem Value="1" Text="Standard"></asp:ListItem>

            <asp:ListItem Value="2" Text="Silver"></asp:ListItem>

            <asp:ListItem Value="3" Text="Gold"></asp:ListItem>

            <asp:ListItem Value="4" Text="Premier"></asp:ListItem>

        </asp:CheckBoxList>

    </div>

    <br />

    <div id="message"></div>

    </form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function asp each server div jquery

相关文章推荐

新的分享

章节导航