How to operate radio, checkbox, and select in jQuery

In view of the online summary of the data layout is poor, Summary of chaos, the version of the old, so a new summary of the commonly used jQuery operation radio, checkbox, select, The jQuery version used for the jquery-1.4.2.min.js. The following is a summary of the three form elements: 1. radio: Single-threaded HTML code: inputtyperadionameradioidradi

In view of the online summary of the data layout is poor, Summary of chaos, the version of the old, so a new summary of the commonly used jQuery operation radio, checkbox, select, The jQuery version used for the jquery-1.4.2.min.js. The following is a summary of the three form elements:

1. radio: single region

HTML code:

1
2
3
4
 

Js operation code:

JQuery ("input [type = 'Radio '] [name = 'Radio']: checked"). length = 0? "No single region is selected": "selected ";
JQuery ('input [type = "radio"] [name = "radio"]: checked'). val (); // gets the value of a set of radio selected items
JQuery ("input [type = 'Radio '] [name = 'Radio'] [value = '2']"). attr ("checked", "checked"); // set one of value = 2 to be selected
JQuery ("# radio2"). attr ("checked", "checked"); // Set id = radio2 as the selected
JQuery ("input [type = 'Radio '] [name = 'Radio']"). get (1 ). checked = true; // SET index = 1, that is, the second item is currently selected
Var isChecked = jQuery ("# radio2"). attr ("checked"); // if one of the IDS = radio2 is selected, isChecked = true; otherwise, isChecked = false;
Var isChecked = jQuery ("input [type = 'Radio '] [name = 'Radio'] [value = '2']"). attr ("checked"); // If one of value = 2 is selected, isChecked = true; otherwise, isChecked = false;
 

2. checkbox: check box

HTML code:

Select All/cancel all
1
2
3
4
5
 

Js operation code:

Var val = jQuery ("# checkbox_id1"). val (); // obtain the value of the check box for the specified id
Var isSelected = jQuery ("# checkbox_id3 "). attr ("checked"); // check whether the check box with id = checkbox_id3 is selected. If it is selected, isSelected = true; otherwise, isSelected = false;
JQuery ("# checkbox_id3"). attr ("checked", true); // or
JQuery ("# checkbox_id3"). attr ("checked", 'checked'); // select the check box of id = checkbox_id3, that is, check
JQuery ("# checkbox_id3"). attr ("checked", false); // or
JQuery ("# checkbox_id3"). attr ("checked", ''); // uncheck the check box id = checkbox_id3.
JQuery ("input [name = checkbox] [value = 3]"). attr ("checked", 'checked'); // select the check box for name = checkbox, value = 3, that is, check
JQuery ("input [name = checkbox] [value = 3]"). attr ("checked", ''); // deselect the check box name = checkbox, value = 3, that is, do not check
JQuery ("input [type = checkbox] [name = checkbox]"). get (2). checked = true; // SET index = 2, that is, the third item is selected
JQuery ("input [type = checkbox]: checked"). each (function () {// because multiple check boxes are selected, You can output the selected values cyclically.
Alert (jQuery (this). val ());
});
// Select all/cancel all
JQuery (function (){
JQuery ("# checkAll"). click (function (){
If (jQuery (this). attr ("checked") = true) {// select all
JQuery ("input [type = checkbox] [name = checkbox]"). each (function (){
JQuery (this). attr ("checked", true );
});
} Else {// cancel all selections
JQuery ("input [type = checkbox] [name = checkbox]"). each (function (){
JQuery (this). attr ("checked", false );
});
}
});
});

3. select: drop-down box

HTML code:

11
22
33
44
55
66

 

Js operation code:

/**
* JQuery obtains various select values.
*/
JQuery ("# select_id"). change (function () {// 1. Add an event for the Select statement. This event is triggered when one of the Select statements is selected.
// Code...
});
Var checkValue = jQuery ("# select_id"). val (); // 2. Obtain the Value of the selected Select item.
Var checkText = jQuery ("# select_id: selected"). text (); // 3. Obtain the Text of the selected Select item
Var checkIndex = jQuery ("# select_id "). attr ("selectedIndex"); // 4. obtain the index value of the selected Select item, or: jQuery ("# select_id "). get (0 ). selectedIndex;
Var maxIndex = jQuery ("# select_id: last "). attr ("index"); // 5. obtain the largest index value of Select, or: jQuery ("# select_id: last "). get (0 ). index;
/**
* JQuery sets Select items
*/
JQuery ("# select_id"). get (0). selectedIndex = 1; // 1. Select an item whose Select index value is 1
JQuery ("# select_id"). val (4); // 2. Select an item whose Value is set to 4.
/**
* JQuery adds/deletes Select Option items
*/
JQuery ("# select_id"). append (" Add option"); // 1. append an Option to Select (drop-down)
JQuery ("# select_id"). prepend (" Select"); // 2. Insert an Option for Select (first position)
JQuery ("# select_id"). get (0). remove (1); // 3. delete Option (second) with an index of 1 in Select)
JQuery ("# select_id: last"). remove (); // 4. Delete the maximum Option of the index value in the Select statement (last one)
JQuery ("# select_id [value = '3']"). remove (); // 5. Delete the Option of '3' in Select.
JQuery ("# select_id"). empty (); // 6. Clear the drop-down list