Jquery Operation Ticket, check box, drop-down list implementation code

1. Select All check boxes: Actually, it is the use of the Jquery selector. Click here to view the Jquery selector.
Html code:
Copy codeThe Code is as follows:
<Form>
Your favorite sports are:
<Input type = "checkbox" name = "item" value = "football"/> football
<Input type = "checkbox" name = "item" value = "basketball"/> basketball
<Input type = "checkbox" name = "item" value = "badminton"/> badminton
<Input type = "checkbox" name = "item" value = "pingpong"/> pingpong
<Input type = "button" id = "checkAll" value = "select all"/>
<Input type = "button" id = "checkFootball" value = ""/>
</Form>

Jquey js script:
Copy codeThe Code is as follows:
$ ('# Checkall'). click (checkAll); // select all
$ ('# CheckFootball'). click (checkFootball); // single choice football
});
Function checkAll ()
{
$ ('Input [type = "checkbox"] [name = "item"] '). attr ("checked", true );
// $ ('[Name = "item"]: checkbox'). attr ("checked", true );
}

Note: you only need to replace "true" with "false" for Full inversion.
Select football
Jquey js script:
Copy codeThe Code is as follows:
Function checkFootball ()
{
$ ("[Name = 'item']: checkbox"). each (function (){
If (this. value = 'football ')
{
This. checked = true;
}
})
}

Note: The purpose is to retrieve and display data from the background. Here, the attr () and val () Methods of jQuery are not used to set and obtain the current checkbox value. Using the JavaScript native Dom method will be more effective than creating jQuery objects.
2. Single-choice button operation
Html code:
Copy codeThe Code is as follows:
A B C D which one do you choose:
<Input type = "radio" name = "item" value = "A"/>
<Input type = "radio" name = "item" value = "B"/> B
<Input type = "radio" name = "item" value = "C"/> C
<Input type = "radio" name = "item" value = "D"/> D
<Input type = "button" id = "getLetter" value = "Get Letter"/>

Initialize selected Letter B
Jquey js script:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Select B for data initialization.
$ ('[Name = "item"]: radio'). each (function (){
If (this. value = 'B ')
{
This. checked = true;
}
});
// Bind an event to obtain letters
$ ('# GetLetter'). click (getLetter );
});

Get selected letters
Jquey js script:
Copy codeThe Code is as follows:
Function getLetter ()
{
Alert ('the obtained letter is' + $ ('[name = "item"] [checked = true]: radio'). val ());
}

3. drop-down box (list) Operations
Copy codeThe Code is as follows:
<Select multiple id = "choose" style = "width = 100px; heigth = 160px"> </select>
<Input id = "addOptions" type = "button" value = "add data"/>
<Input id = "getSelectedOption" type = "button" value = "get selected value"/>
<Input id = "clearOptions" type = "button" value = "clear list"/>

Jquey js script:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# AddOptions'). click (addOptions); // Add an element to the list
$ ('# GetSelectedOption'). click (getSelectedOption); // obtain the selected Element
$ ('# Clearoptions'). click (clearOptions); // clear the elements in the list
$ ('# AddOptions'). click (); // triggers the add element event to the list.
});

Append Element
Jquey js script:
Copy codeThe Code is as follows:
Function addOptions ()
{
Var selectContainer = $ ('# choose ');
For (var I = 0; I <5; I ++)
{
Var option = $ ('<option> </option>'). text ('choose' + I). val (I );
SelectContainer. append (option );
}
}

Obtain the selected Element
Copy codeThe Code is as follows:
Function getSelectedOption ()
{
/* Each element is displayed one by one */
Var options = $ ('# choose> option: selected ');
$. Each (options, function (){
Alert ('option: '+ this. value );
});
/* Each element is displayed one by one. The first is abbreviated */
$ ('# Choose> option: selected'). each (function (){
Alert ('option2: '+ this. value );
});
// Directly pop up the data. If it is a drop-down box, the data will pop up directly. If it is a list and multiple numbers are selected
// Data, separated by commas (,)
Alert ('val: '+ $ (' # choose '). val ());
}

Clear list
Copy codeThe Code is as follows:
Function clearOptions ()
{
$ ('# Choose'). empty ();
}

Common:
Copy codeThe Code is as follows:
Var ddl = $ ("# ddlDiaryType option: selected"). text (); // drop-down table
Var reb = $ ("# RbIfprivate [checked = true]: radio"). val (); // single vertex