By 07/02/2014 12 Comments

How To Performing Calculations with Check Boxes using jQuery

Check box

  • It is used for check the multiple data items / options by the end-user

Following example describes the calculation using checkboxes in asp.net and 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 total; // declare a variable var total
            var checked = $('input:checkbox').click(function(e) { // trigger an event when clicked at check boxes

                calculateSum(); // called method
            });

            function calculateSum() { // declare method / function
                var $checked = $(':checkbox:checked');  // get the value of checked check boxes assign these values into $checked variable

                total = 0.0; // initialize total variable with 0.0
                $checked.each(function() { // called function by each() method each time, next() which finds the very next sibling of each checkbox
                    total += parseFloat($(this).next().text()); // assign checked check boxes values into total, parseFloat used for convert string values into floating points
                });

                $('#TT-paragraph').text("Your Total Amount Is: " + total.toFixed(2));// display the result
            }
        });

    </script>

ASP.NET Code snippet

<!--- Following code displays / renders the checkboxes and label control --->

<asp:Label runat="server" Text="Click on the checkboxes to total up the values (in USD)"></asp:Label>
        <br/> <br/>
        <table>
        <tr>
        <td>
        1000 MB Disk Space m/o</td>
        <td>
        <asp:CheckBox ID="TT_Checkbox1" runat="server" Text="8.2" />
        </td>
        </tr>
        <tr>
        <td>
        10 GB Bandwidth m/o</td>
        <td>
        <asp:CheckBox ID="TT_Checkbox2" runat="server" Text="4.20" />
        </td>
        </tr>
        <tr>
        <td>
        Additional Database	m/o</td>
        <td>
        <asp:CheckBox ID="TT_Checkbox3" runat="server" Text="12.88" />
        </td>
        </tr>
        <tr>
        <td>
        Domain Registration</td>
        <td>
        <asp:CheckBox ID="TT_Checkbox4" runat="server" Text="27.20" />
        </td>
        </tr>
        </table>
        <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 .