JQuery's basic operations on form elements _ jquery-js tutorial

This article mainly introduces JQuery's summary of the basic operations on form elements. For more information, see the JQuery implementation of the onChange event in the select drop-down list:

JQuery:

$(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); } else if($(this).val() =="pro2") { $("#pro2").slideDown(); $("#pro1").slideUp(); } }); });

HTML:

 Please select product below Product 1 Product 2 

// 1. basic select operations of jQuery $ ("# select_id "). change (function () {// code ...}); // Add an event for Select. When one of the Select events is selected, var checkValue =$ ("# select_id") is triggered "). val (); // obtain the Value var checkValue selected by Select = $ ('. formc select [@ name = "country"] '). val (); // obtain the value of the selected item name = country in the drop-down menu var checkValue = $ ("# select_id "). val (). join (","); // obtain the value var checkText = $ ("# select_id") of multiple select statements (multiple = "true "). find ("option: selected "). text (); // obtain the selected Text var checkText = $ ("Select [@ name = country] option [@ selected]"). text (); // obtain the text of the selected select item (note that there are spaces in the middle) var checkText = $ ("# select_id option: selected "). text (); var cc2 = $ ('. formc select [@ name = "country"] '). val (); // obtain the value of the selected item from the drop-down menu var cc3 = $ ('. formc select [@ name = "country"] '). attr ("id"); // obtain the ID attribute value var checkIndex = $ ("# select_id") of the selected item in the drop-down menu "). get (0 ). selectedIndex; // obtain the selected index value var maxIndex =$ ("# select_id option: last "). attr ("index"); // obtain the maximum index value of Select $ ("# select_id "). get (0 ). selectedIndex = 1; // Select $ ('# select_id') [0] for the item whose Select index value is 1 (item 2). selectedIndex = 1; // Select $ ("# select_id") for the item whose Select index value is 1 (item 2 "). val (4); // Select a Value of 4 from Select $ ("# select_id option [text = 'jquery ']"). attr ("selected", true); // set the Select Text value to $ ("# select_id") for jQuery "). attr ("value", '-sel3'); // set the value =-sel3 project to the currently selected item $ ("# select_id "). empty (); // clear the drop-down box $ ("# select_id "). append ("Text"); // Append an Option for Select (drop-down) $ ("11112222"). AppendTo (" # select_id ") // Add option $ (" # select_id "). prepend ("Select"); // Insert an Option for Select (first position) $ (" # select_id option: last "). remove (); // Delete the maximum Option (last) of the index values in the Select statement $ ("# select_id option [index = '0']"). remove (); // delete Option (first) with the index value 0 in Select $ ("# select_id option [value = '3']"). remove (); // delete Option $ ("# select_id option [text = '4']") of Value = '3' in Select. remove (); // Delete the Option of '4' Text = '4' in the Select statement // 2. jquery's basic radio operation var item =$ ('input [@ name = items] [@ checked] '). val (); // obtain the value of a set of radio selected items var rval =$ ("input [@ type = radio] [@ checked]"). val (); // get the value of the selected item of the single Queue (note that there is no space in the middle) $ ('input [@ name = items] '). get (1 ). checked = true; // the second element of the radio Group is the currently selected value $ ("input [@ type = radio]"). attr ("checked", '2 '); // set the project with value = 2 to the selected item $ ("input [@ type = radio] [@ value = 2]"). attr ("checked", 'checked'); // set single checked value = 2 to the selected status. (Note that there is no space in the middle) // 3. basic operations of jquery on checkbox $ ("# checkbox_id "). attr ("value"); // multiple choice box checkbox $ ("input [@ type = checkbox] [@ checked]"). val (); // obtain the value of the first check box $ ("input [@ type = checkbox] [@ checked]"). each (function () {// Since multiple check boxes are selected, You can output alert ($ (this) cyclically ). val () ;}); $ ("# chk1 "). attr ("checked", ''); // do not tick $ (" # chk2 "). attr ("checked", true); // tick if ($ ("# chk1 "). attr ('checked') = undefined) // you can check whether a check has been completed. // 4. basic jquery operations on text $ ("# txt "). attr ("value"); // text box, text area: $ ("# txt "). attr ("value", ''); // clear the content $ (" # txt "). attr ("value", '11'); // fill in the content