Usage Analysis of jQuery form field attribute Filter

Source: Internet
Author: User

Usage Analysis of jQuery form field attribute Filter

This article mainly introduces the usage of jQuery form field attribute filters. Examples of commonly used form field attribute filters such as checked, enabled, disabled, and selected are analyzed, for more information, see

 

 

This example describes how to use the jQuery form field attribute filter. Share it with you for your reference. The specific analysis is as follows:

The form contains various form fields. You can use the form field attribute selector to obtain the selected single-choice buttons, check boxes, and list items, you can also search for form fields from the document based on whether they are available.

1.: checked Selector

Select All selected form fields. Format:

The Code is as follows:

$ ("Selector: checked ")

It can be input, radio, and checkbox.

 

2. enabled Selector

Select all available form fields. format:

The Code is as follows:

$ ("Selector: enabled ")

 

3.: disabled Selector

Used to select all disabled form fields. format:

The Code is as follows:

$ ("Selector: disabled ")

 

4.: selected Selector

Select All selected option elements from the list box. format:

The Code is as follows:

$ ("Selector: selected ")

 

5.: hidden Selector

Used to select all invisible elements

The Code is as follows:

$ ("Selector: hidden ")

 

6.: visible Selector

Used to select all visible elements

Simple Example:

The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> application example of form field attribute filter selector </title>
<Script type = "text/javascript" src = "jquery-1.7.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Input: checked" ).css ("border", "1px solid red ");
$ ("Input: disabled" ).css ("background", "# FCF ");
$ ("Input: enabled"). val ("available text box ");
});
</Script>
</Head>
<Body>
<H3 align = "center"> application example of form field attribute filter selector <Table width = "602" height = "81" border = "1">
<Tr>
<Td width = "118"> check box: </td>
<Td width = "443"> <input type = "checkbox" checked = "checked"/> check box selected
<Input type = "checkbox" checked = "checked"/> check box selected
<Input type = "checkbox"/> the checkbox is not selected.
</Td>
</Tr>
<Tr>
<Td> available text box: </td>
<Td> <input type = "text"/> </td>
</Tr>
<Tr>
<Td> unavailable text box: </td>
<Td> <input type = "text" disabled = "disabled"/> </td>
</Tr>
<Tr>
<Td> drop-down list </td>
<Td>
<Select name = "test">
<Option> Zhejiang </option>
<Option> Hunan </option>
<Option selected = "selected"> Beijing </option>
<Option selected = "selected"> Tianjin </option>
<Option> Guangzhou </option>
<Option> Hubei </option>
</Select>
</Td>
</Tr>
</Table>
</Body>
</Html>

 

:

I hope this article will help you with jQuery programming.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.