JQuery operations form elements summary

Form elements are everywhere and have become an indispensable part of Web applications. The most common operation on a form is to obtain the value of a form element or change the value of a form element. In JQuery and JavaScript, how does one operate the values of form elements?

JQuery operation form summary:

1. Text box, password box, hidden field, and text field (if the id is changed to the corresponding one, the value attribute exists, and the value can be obtained using attr ('value'); otherwise, undefined is returned ):
1.1 get-> $ ("# text"). val () or $ ("# text"). attr ('value ')

1.2 Settings-> $ ("# text"). val ('test') or $ ("# text"). attr ('value', 'test ')

2. Buttons: common buttons, reset buttons, and submit buttons (replace the id with the corresponding value attribute, and the value can be obtained using attr ('value') or val, otherwise, attr returns undefined and val returns null)
2.1 get-> $ ("# btn"). val () or $ ("# btn"). attr ('value ')

2.2 Settings-> $ ("# btn"). val ('test') or $ ("# btn"). attr ('value', 'test ')

3. Check box and single struct: (replace id with the corresponding one. If the value attribute exists, you can use attr ('value') or val () to obtain the value. Otherwise, attr returns undefined, val returns on (whether or not the checked attribute exists ))
3.1 get-> $ ("# check"). val () or $ ("# check"). attr ('value ')

3.1 Settings-> $ ("# check"). val ('test') or $ ("# check"). attr ('value', 'test ')

3.3 obtain the value of the selected check box: $ ("input [type = checkbox] [checked]"). attr ('value') or $ ("input [type = checkbox] [checked]"). val () [ps: only the first selected value is returned]

// Obtain the values of all selected check boxes
$ ("Input [type = checkbox] [checked]"). each (function (){
Alert ($ (this). val ());
})

// If you want to pass all the selected values to the background, name the name attribute of the check box in the form of namevalue [].

3.4 select all, cancel all, and invert (single-choice cannot be all selected, you can select inverse)
// Select all. The checked value can be true or checked, which is the value given by w3c.
$ ("[Name = 'test1']"). attr ("checked", 'checked ');
// Cancel all selections
$ ("[Name = 'test1']"). removeAttr ("checked") // reselect
$ ("[Name = 'test1']"). each (function ()
{
If ($ (this). attr ("checked "))
{
$ (This). removeAttr ("checked ");
}
Else
{
$ (This). attr ("checked", 'true ');
}
});

3.5 check the selected status: $ ("# test1 & Prime;). attr (" checked "): undefined is returned if not selected, and checked is returned if selected. Therefore, $ ("# test1 & Prime ;). attr ("checked") = true cannot be used as a result to determine whether or not to select, $ ("# test1 & Prime ;). attr ("checked") = undefined can be used as an unselected judgment.

3.6 deselect-> $ ("# test1 & Prime ;). attr ("checked", false) or $ ("# test1 & Prime ;). removeAttr ("checked") (ps: $ ("# test1 & Prime ;). attr ("checked", ") is valid in FireFox and invalid in Google)

3.7 select a check box (single digit)-> $ ("# test2 & Prime ;). attr ("checked", true) or $ ("# test2 & Prime ;). attr ("checked", "checked ")

4. Drop-down box:
4.1 get the value of the selected option-> $ ("# slt"). val () (ps: $ ("# slt"). attr ('value') will return undefined)

4.2 Settings-> $ ("# slt "). val ('Audi ') (ps: if the select option has an audi value, this option will be selected. If it does not exist, the select option will not be changed)

4.3 obtain the text of the selected option-> $ ("# slt option: selected "). text () or $ ("# slt "). find ("option: selected "). text ()

4.4 set the text of the selected option-> $ ("# slt "). find ("option: selected "). text ('test') or $ ("# slt option: selected "). text ('test ');

4.5 retrieve the index of the selected item-> $ ("# slt"). get (0). selectedIndex

4.6 set indexes-> $ ("# slt "). get (0 ). selectedIndex = index (ps: the index starts from 0, and the maximum value of index cannot exceed the maximum index of option, otherwise $ ("# slt "). get (0 ). selectedIndex returns-1)

4.7 clear select-> explain ("#slt00000000.html (") or $ (" # slt "). empty ()

4.8 Add option-> $ ('<option value = "1 & Prime;> 1 </option> '). appendTo ($ ("# slt") or $ ("# slt "). append ('<option value = "3 & Prime;> 2 </option> ');

4.9 delete option-> $ ("# slt option [value = 'opel']"). remove (): The delete value is the opel option (the value attribute must exist. You can also delete the option based on the existing text/index attribute)

5. Availability of elements (the official value of disabled is disabled)
5.1 disable elements-> $ ("# text "). attr ("disabled", true) or $ ("# text "). attr ("disabled", "disabled ");

5.2 enable element-> $ ("# text"). attr ("disabled", false) or $ ("# text"). removeAttr ("disabled ");

5.3 Availability-> $ ("# text "). if attr ("disabled") returns disabled, it will be unavailable. If it returns undefined, it will be available (ps: It can be based on $ ("# text "). attr ("disabled") = undefined return value judgment)