Pages

▼

Monday, February 27, 2012

Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

<html>
    <head>
            <title>jQuery Tutorial Demo: Select All Checkboxes</title>
            <script type="text/javascript" src="jquery.js"></script>
            <style type="text/css">body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px}
            h1, h2{font-size:20px;}</style>
    </head>
    <body>
        <script type="text/javascript">
        $(document).ready(function()
        {
            $("#paradigm_all").click(function()               
            {
                var checked_status = this.checked;
                $("input[@name=paradigm]").each(function()
                {
                    this.checked = checked_status;
                });
            });                   
        });
       
        </script>
        <a href="http://jetlogs.org/2007/07/01/jquery-select-all-checkbox/">&laquo; Code Explanation</a> | <a href="jquery_select_all.zip">Download Source</a>
        <h2>jQuery Tutorial: Select All Checkbox</h2>
        <p>Here is a very simple demonstration of how the select all checkbox is implemented in jQuery</p>
       
        Javascript supports the following programming paradigms:<br>
        <input type="checkbox" name="paradigm" value="Imperative">Imperative<br>
        <input type="checkbox" name="paradigm" value="Object-Oriented">Object-Oriented<br>
        <input type="checkbox" name="paradigm" value="Functional">Functional<br><br>       
        <input type="checkbox" id="paradigm_all">Select All<br>

       
    </body>
</html>
at

No comments:

Post a Comment

Thank you for your Comment....