Next »
1925/1956
« Previous

Form selector

List of form element selectors

jQuery contains filters that make it easy to select form elements. The following table summarizes all of the different form filters.

FilterDescription
:buttonSelects all button elements and elements of type button.
:checkboxSelects all elements of type checkbox.
:checkedSelects all elements that are checked.
:disabledSelects all elements that are disabled.
:enabledSelects all elements that are enabled.
:fileSelects all elements of type fi le.
:imageSelects all elements of type image.
:inputSelects all input, text area, select and button elements.
:passwordSelects all elements of type password.
:radioSelects all elements of type radio.
:resetSelects all elements of type reset.
:selectedSelects all elements that are selected.
:submitSelects all elements of type submit.
:textSelects all elements of type text.

The following code show show to get the count of input elements.


<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ <!--from  w  ww. j  a  v a2  s.  c o  m-->
                var n = $(':input').length; 
                document.writeln(n); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="hidden" /> 
            <input type="password" /> 
            <input type="radio" /> 
            <input type="reset" /> 
            <input type="submit" /> 
            <input type="image" /> 
            <input type="file" /> 
            <input type="checkbox" /> 
            <input type="reset" /> 
            <input type="button" value="hit me"/> 
            <button>Hit me too</button> 
            <select>
                <option>floor 1</option> 
                <option>floor 2</option> 
            </select>
            <textarea></textarea>
        </form> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Form selector

Get all of the elements

The following code shows a few different ways to get all of the elements in the same form.


<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ <!--from   w  w  w  .j a  v a  2 s  . co m-->
                var n1 = $("input").length; 
                var n2 = $(":input").length; 
                var n3 = $("form > *").length; 
                var n4 = $(":text").length; 
                var n5 = $("input[type='text']").length; 
                document.writeln(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="text" /> 
            <input type="text" /> 
        </form> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Form selector
Next »
« Previous