Cascading Checkboxlist

(ASP.NET)


Hi,
In this article i placed two checkboxlist in my web page. If  user check the checkbox in the first checkboxlist, the corresponding items in the second checkboxlist will be checked. I used jquery to implement this functionality.

.aspx page

<head runat="server">
    <title></title>
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#chck_carmake').find('input[type=checkbox]').click(function () {

                var carmk = $(this).val();

                //alert('hello');

                if ($(this).is(':checked')) {

                    $('#chck_carmodel').find('input[type=checkbox]').each(function () {

                        var carmdl = $(this).val();

                        var regex = new RegExp('\\b' + carmk + '\\b');

                        var result = regex.test(carmdl);

                      

                        if (result)
                            $(this).prop("checked", true);

                     
                    });
                }
                else {

                    $('#chck_carmodel').find('input[type=checkbox]').each(function () {
                   

                            var carmdl = $(this).val();

                            var regex = new RegExp('\\b' + carmk + '\\b');

                            var result = regex.test(carmdl);

                      

                            if (result)
                            $(this).prop("checked", false);
                    });
                }
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
   <div>
        <asp:CheckBoxList BackColor="LightBlue" ForeColor="White" ID="chck_carmake" runat="server">
            <asp:ListItem>BMW</asp:ListItem>
            <asp:ListItem>MERCEDES</asp:ListItem>
        </asp:CheckBoxList>
        <br />
        <asp:CheckBoxList BackColor="gray" ForeColor="White" ID="chck_carmodel" runat="server">
            <asp:ListItem>BMW-328I</asp:ListItem>
            <asp:ListItem>BMW-745LI</asp:ListItem>
            <asp:ListItem>BMW-M3</asp:ListItem>
            <asp:ListItem>MERCEDES-S500</asp:ListItem>
            <asp:ListItem>MERCEDES-GL320</asp:ListItem>
        </asp:CheckBoxList>
    </div>

    </form>
</body>

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
6/28/2013
6/28/2013
Download PDF

Comments