By 07/02/2014 5 Comments

How To Instantly Display CheckBox Checked Items using jQuery

Instantly display values

  • It means we can display the value of each check boxes quickly

 

Following code describes the how instantly display values in check box in asp.net using JQuery

jQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!--- import jquery library --->
    <script>
        $(document).ready(function() { // method called, when document loaded by browser

            var arr; // declare a variable
            var checked = $('input:checkbox').click(function(e) { // click event triggers when user clicks the check box

                trackCheckedBoxes(); // method calling
            });

                function trackCheckedBoxes() { // declare function
                    var $checked = $(':checkbox:checked'); // get checked checkboxes and assign into $checked variable

                    arr = []; // declare an array

                    $checked.each(function() { // this function called by each(), each time
                        // for html controls use $(this).val()

                        arr.push($(this).next().text()); // push() method are used for adding a new items into array's end

                    });

                    $('#TT-paragraph').html(arr.join('<br/>')); // display result using html() method,html() method returns contents to be displayed like innerHTML, join() method is used for joining array elements in string and also return in string
                }

        });

    </script>

ASP.NET Code snippet

<!--- Following code renders check boxes and a label control on browser --->
<asp:Label runat="server" Text="Dynamically display the checked options"></asp:Label>
        <br/> <br/>
        <asp:CheckBox ID="TT_Checkbox1" runat="server" Text=" 1st Option" /><br />
        <asp:CheckBox ID="TT_Checkbox2" runat="server" Text=" 2nd Option" /><br />
        <asp:CheckBox ID="TT_Checkbox3" runat="server" Text=" 3rd Option" />
        <br /><br />
        <p id="TT-paragraph"></p>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .