JQuery Form Elements Selector

From CoderLearner
Jump to: navigation, search
SelectorjQuery ExampleDescription
:input$(':input').css('border','2px solid blue');All input elements
:text$(':text').css('border','2px solid blue');All input elements with type="text"
:password$(':password').css('border','2px solid blue');All input elements with type="password"
:button$(':button').css('border','2px solid blue');All input elements with type="button"
:image$(':image').css('border','2px solid blue');All input elements with type="image"
:file$(':file').css('border','2px solid blue');All input elements with type="file"
:checkbox$(':checkbox').css({'color':'#fff','background-color':'blue'});All input elements with type="checkbox"
:radio$(':radio').wrap('<span style="background-color:red"/>');All input elements with type="radio"
:reset$(':reset').css('border','2px solid blue');All input elements with type="reset"
:submit$(':submit').css('border','2px solid blue');All input elements with type="submit"

Example

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Selector</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>
        <script>
            $(document).ready(function() {
                $(':password').css('border','2px solid blue');
                $(':radio').css('border','1px solid grey');
                $(':checkbox').css('border','1px solid red');
            });
        </script>
    </head>
    <body>
        <form>
            <table>
                <tr>
                    <td>Name</td>
                    <td><input type="text" name="name"/></td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td><input type="text" name="age"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" name="NAME_VALUE" value="VALUE"/>
                        Label 1 <br/>
                        <input type="checkbox" name="NAME_VALUE" value="VALUE"/>
                        Label 2 
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="radio" name="RNAME_VALUE" value="VALUE1"/>
                        1 Label<br/>
                        <input type="radio" name="RNAME_VALUE" value="VALUE2"/>
                        2 Label<br/>
                        <input type="radio" name="RNAME_VALUE" value="VALUE3"/>
                        3 Label<br/>
                        <input type="radio" name="RNAME_VALUE" value="VALUE4"/>
                        4 Label<br/>
                        <input type="radio" name="RNAME_VALUE" value="VALUE5"/>
                        5 Label<br/>
                    </td>
                </tr>
                <tr>
                    <td>Password 1</td>
                    <td><input type="password" name="pass1"/></td>
                </tr>
                <tr>
                    <td>Password 2</td>
                    <td><input type="password" name="pass2"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button type="button">Process Now</button></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="file" name="myfile" /></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="submit" name="Submit" value="Submit"/></td>
                </tr>

                <tr>
                    <td></td>
                    <td><input type="reset" name="rest" value="Reset"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Try It