JQuery operate Form elements

JQuery operate Form elements

Forms are often required for Web development. form elements include select, checkbox, radio, textarea, button, file, text, hidden, and password. Among them, the read and write operations of checkbox and radio are quite variable. checkbox and radio are often used in one group to achieve multiple choices or single choice. JQuery provides a form selector that allows us to easily obtain one or more elements of a form.
 

Selector	Return	Example
: Input	Set Element	$ (": Input") Select All, and elements.
: Text	Single Row text box set	$ (": Text") select all single-line text boxes.
: Password	Password box set	$ (": Password") select all password boxes.
: Radio	Single Row text box set	$ (": Radio") selects all single partitions.
: Checkbox	Check box set	$ (": Checkbox") select all check boxes.
: Submit	Set of submit buttons	$ (": Submit") select all the submit buttons.
: Image	Image button set	$ (": Image") select all image buttons.
: Reset	Reset button set	$ (": Reset") select all reset buttons.
: Button	Button set	$ (": Button") select all buttons.
: File	Upload domain set	$ (": File") Select All upload domains.
: Hidden	Invisible Element Set	$ (": Den den") selects all invisible elements.

The following describes the usage of select, checkbox, and radio.

Select

The content of the select element is as follows:

BeijingShanghaiWuhanNanjingGuangzhouShenzhen

Select Operation

// Obtain the value of the selected select item $ ('# select '). val (); // obtain the text of the selected select item $ ('# select '). children ('option: selected '). text (); // select option $ ('# select') with the selected value of 3 '). val ('3'); // set the select selected text to option $ ('# select') of Wuhan '). children ('option: contains (Wuhan )'). attr ('selected', 'selected ');

Checkbox

Select your favorite city Beijing Shanghai Nanjing Shenzhen Guangzhou Wuhan Obtain the selected checkboxSelect Shenzhen and GuangzhouSelect AllNot allInvert Selection

// Obtain the selected checkbox value $ ('# btnCheckbox1 '). click (function () {var values = []; $ ('# checkboxGroup '). find (': checkbox: checked '). each (function () {values. push ($ (this ). val () ;}); alert (values. join (',') ;}); // select Shenzhen and Guangzhou $ ('# btnCheckbox2 '). click (function () {var $ group =$ ('# checkboxGroup'); $ group. find (': checkbox '). each (function () {var $ this = $ (this), val = $ this. val (); if (val = 'shenzhen' | val = 'guangzhou ') {$ this. prop ('C Hecked ', true);} else {$ this. prop ('checked', false) ;}}) ;}); // select all $ ('# btnCheckbox3 '). click (function () {var $ group =$ ('# checkboxGroup'); $ group. find (': checkbox '). prop ('checked', true) ;}); // do not select $ ('# btnCheckbox4 '). click (function () {var $ group =$ ('# checkboxGroup'); $ group. find (': checkbox '). prop ('checked', false) ;}); // reselect $ ('# btnCheckbox5 '). click (function () {var $ group =$ ('# checkboxGroup'); $ group. find (': Checkbox'). each (function () {var $ this = $ (this); $ this. prop ('checked ',! $ This. prop ('checked '));});});

Radio

Select your favorite city Beijing Shanghai Nanjing Shenzhen Guangzhou Wuhan Obtain the selected radioSelect Shanghai

// Obtain the currently selected radio value $ ('# btnRadio1 '). click (function () {var group = $ ('# radioGroup'), value = group. find (': radio: checked '). val (); alert (value) ;}); // select Shanghai $ ('# btnRadio2 '). click (function () {$ ('# radioGroup '). find (': radio [value = Shanghai]'). prop ('checked', true );});

Form

JQuery provides serialize () and serializeArray () to obtain the value of form elements. serialize () Concatenates the obtained value into a string and serializeArray () returns an array.

SubmitResetGet the form value

// Submit $ ('# btnSubmit '). click (function () {$ ('# form '). submit () ;}); // reset $ ('# btnreset '). click (function () {// because jQuery does not provide the reset method, you can only use the form native reset method. $ ('# Form '). get (0 ). reset () ;}); // obtain the form value $ ('# btnformvalue '). click (function () {alert (decodeURIComponent ($ ('# form '). serialize ()));});