In jQuery, the html tag is single-member, check box, and drop-down box.

1. radio: single region

HTML code:

The code is as follows:	Copy code
<Input type = "radio" name = "radio" id = "radio1" value = "1"/> 1 <Input type = "radio" name = "radio" id = "radio2" value = "2"/> 2 <Input type = "radio" name = "radio" id = "radio3" value = "3"/> 3 <Input type = "radio" name = "radio" id = "radio4" value = "4"/> 4

Js operation code:

The code is as follows:

Copy 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:

The code is as follows:

Copy code

<Input type = "checkbox" name = "checkbox" id = "checkAll"/> Select All/cancel all <Input type = "checkbox" name = "checkbox" id = "checkbox_id1" value = "1"/> 1 <Input type = "checkbox" name = "checkbox" id = "checkbox_id2" value = "2"/> 2 <Input type = "checkbox" name = "checkbox" id = "checkbox_id3" value = "3"/> 3 <Input type = "checkbox" name = "checkbox" id = "checkbox_id4" value = "4"/> 4 <Input type = "checkbox" name = "checkbox" id = "checkbox_id5" value = "5"/> 5

Js operation code:

The code is as follows:

Copy 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:

The code is as follows:	Copy code
<Select name = "select" id = "select_id" style = "width: 100px;"> <Option value = "1"> 11 </option> <Option value = "2"> 22 </option> <Option value = "3"> 33 </option> <Option value = "4"> 44 </option> <Option value = "5"> 55 </option> <Option value = "6"> 66 </option> </Select>

Js operation code:

The code is as follows:

Copy 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 ("<option value = 'add'> Add option </option>"); // 1. append an Option to Select (drop-down) JQuery ("# select_id "). prepend ("<option value = 'Select'> select </option>"); // 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