JQuery: Summary of various methods of manipulating form elements

Source: http://www.ido321.com/1220.html

Form elements are ubiquitous and have become an integral part of Web applications. The most common operation for a form is to get the value of a form element or to change the value of a form element. How do you manipulate the values of form elements in jquery and JavaScript?

jquery Action Form Summary:

1, text box, Password box, hidden field, Text field (ID replaced by corresponding, the Value property exists, in order to take advantage of attr (' value ') to get the value, otherwise return undefined):

1.1 Get->$ ("#text"). Val () or $ ("#text"). attr (' value ')

1.2 Set->$ ("#text"). Val (' Test ') or $ ("#text"). attr (' value ', ' Test ')

2, Button: Normal button, reset button and submit button (ID replaced by corresponding, Value property exists to use attr (' value ') or Val () to get the value, otherwise attr return undefined,val return empty )

2.1 Get->$ ("#btn"). Val () or $ ("#btn"). attr (' value ')

2.2 Set->$ ("#btn"). Val (' Test ') or $ ("#btn"). attr (' value ', ' Test ')

3, check box, Radio box: (ID replaced by corresponding, the Value property exists, in order to take advantage of attr (' value ') or Val () to get the value, otherwise attr returns Undefined,val return on (whether or not checked attribute exists) )

3.1 Get->$ ("#check"). Val () or $ ("#check"). attr (' value ')

3.1 Set->$ ("#check"). Val (' Test ') or $ ("#check"). attr (' value ', ' Test ')

3.3 Gets the value of the checked check box: $ ("input[type=checkbox][checked]"). attr (' value ') or $ ("input[type=checkbox][checked]"). Val () "PS: Only the first selected value is returned.

Gets the value of the check box for all selected
$ ("input[type=checkbox][checked]"). each (function() {
Alert (this). Val ());
})

To pass an all-checked value to the background, name the check box named namevalue[] Form

3.4 Select all, deselect all and reverse (select box not all, can be reversed )//Select all, the value of checked can be true or checked, which is the value given by the
$ ("[name= ' test1 ']"). attr ("Checked",' checked ');
//Cancel Select all
$ ("[name= ' test1 ']"). Removeattr ("checked")//Counter-select

$ ("[name= ' test1 ']"). each (function ()
{
if ($ (this). attr ("checked"))
{
$ (this). Removeattr ("checked");
}
Else
{
$ (this). attr ("Checked", ' true ');
}
});

3.5 Check state: $ ("#test1 ″). attr (" checked "): Return undefined unchecked, check return checked. So, $ ("#test1 ″). attr (" checked ") = = true cannot be judged as whether it is selected, $ (" #test1 ″). attr ("checked") = = undefined can be used as an unchecked judgment.

3.6 deselect - $ ("#test1 ″). attr (" checked ", false) or $ (" #test1 ″). Removeattr ("Checked") (PS : $ ("#test1 ″). attr (" Checked "," ") valid in Firefox, not valid in Google)

3.7 Select a check box (radio box) –>$ ("#test2 ″). attr (" Checked ", true) or $ (" #test2 ″ "). attr (" Checked "," checked ")

4. Drop-down box:

4.1 Gets the value of the selected option->$ ("#slt"). Val () (ps:$ ("#slt"). attr (' value ') returns undefined)

4.2 Set->$ ("#slt"). Val (' Audi ') (PS: If there is an option with the value Audi in Select, the option will be selected and if not present, select does not make any changes )

4.3 Gets the text->$ ("#slt option:selected") of the selected option. Text () or $ ("#slt"). Find ("option:selected"). Text ()

4.4 Sets the text->$ ("#slt") of the selected option. Find ("option:selected"). Text (' test ') or $ ("#slt option:selected"). Text (' Test ');

4.5 Gets the index->$ ("#slt") of the selected item. Get (0). SelectedIndex

4.6 Set Index->$ ("#slt"). Get (0). SelectedIndex = Index (PS: Index starting from 0, the maximum value of index cannot exceed the maximum index of option, otherwise $ ("#slt"). Get (0). SelectedIndex return-1)

4.7 Empty The select->$ ("#slt"). HTML (") or $ (" #slt "). Empty ()

4.8 Add option->$ (' <option value= ' 1″>1</option> '). AppendTo ($ ("#slt")) or $ ("#slt"). Append (' <option Value= "3″>2</option>");

4.9 Delete option->$ ("#slt option[value= ' Opel ']"). Remove (): The delete value is the option of Opel (theValue property must be present, as can the text/ Index property Delete option)

5, the availability of elements (disabled's official value is disabled)

5.1 Disable Element->$ ("#text"). attr ("Disabled", true) or $ ("#text"). attr ("Disabled", "disabled");

5.2 Enable Element->$ ("#text"). attr ("disabled", false) or $ ("#text"). Removeattr ("Disabled");

5.3 Whether->$ ("#text") is available. attr ("disabled") returns disabled is not available and returns undefined is available (PS: can be based on $ ("#text"). attr ("disabled") = = Undefined's return value )

Filed under: XAMPP: Access to phpMyAdmin Error resolution

JQuery: Summary of various methods of manipulating form elements