JQuery-based methods for obtaining various control values

HTML code Copy codeThe Code is as follows: <asp: RadioButtonList ID = "RadioButtonList1" runat = "server">
<Asp: ListItem> 1 </asp: ListItem>
<Asp: ListItem> 2 </asp: ListItem>
<Asp: ListItem> 3 </asp: ListItem>
<Asp: ListItem> 4 </asp: ListItem>
</Asp: RadioButtonList>
<Div style = "text-align: left">
<A id = "btnGetRadioButtonListValue" href = "javascript:"> obtain the Value of RadioButtonList using Type </a>
</Div>
<Br/>
<Div style = "text-align: left">
<Input type = "radio" name = "radioSelect" value = "A"/> A <br/>
<Input type = "radio" name = "radioSelect" value = "B"/> B <br/>
<Input type = "radio" name = "radioSelect" value = "C"/> C <br/>
<Input type = "radio" name = "radioSelect" value = "D"/> D <br/>
</Div>
<Div style = "text-align: left">
<A id = "btnGetRadioValue" href = "javascript:"> obtain Radio Value by Name </a>
</Div>
<Br/>
<Br/>
<Div style = "text-align: left">
<Input type = "checkbox" name = "chkSelect" value = "A"/> A <br/>
<Input type = "checkbox" name = "chkSelect" value = "B"/> B <br/>
<Input type = "checkbox" name = "chkSelect" value = "C"/> C <br/>
<Input type = "checkbox" name = "chkSelect" value = "D"/> D <br/>
</Div>
<Div style = "text-align: left">
<A id = "btnGetCheckBoxValue" href = "javascript:"> get the CheckBox Value by Name </a> <a id = "btnSelectAllOn" href = "javascript: "> select all </a> <a id =" btnSelectAllOff "href =" javascript: "> invert </a>
</Div>
<Br/>
<Br/>
<Div style = "text-align: left">
<Select id = "multiple1" multiple = "multiple" style = "width: 300px; height: 300px;">
<Option value = "A1"> A1 </option>
<Option value = "A2"> A2 </option>
<Option value = "A3"> A3 </option>
<Option value = "A4"> A4 </option>
</Select>
</Div>
<Div style = "text-align: left">
<A id = "btnGetMultipleValue" href = "javascript:"> get the Value of Multiple </a> <a id = "btnAddMultipleOption" href = "javascript: "> Add </a> <a id =" btnRemoveMultipleOption "href =" javascript: "> remove </a>
</Div>
<Br/>
<Br/>
<Div style = "text-align: left">
<Select id = "select1">
<Option value = "B1"> B1 </option>
<Option value = "B2"> B2 </option>
<Option value = "B3"> B3 </option>
<Option value = "B4"> B4 </option>
</Select>
</Div>
<Div style = "text-align: left">
<A id = "btnGetSelectValue" href = "javascript:"> obtain the Select Value </a> <a id = "btnAddSelectOption" href = "javascript: "> Add </a> <a id =" btnRemoveSelectOption "href =" javascript: "> remove </a>
</Div>

JQuery codeCopy codeThe Code is as follows: <script type = "text/javascript">
$ (Document). ready (function (){
// Obtain the Value of RadioButtonList
$ ("# BtnGetRadioButtonListValue"). click (function (){
If ($ ("input [type = radio]: checked"). val () = null ){
Alert ("select ");
Return false;
}
Alert ($ ("input [type = radio]: checked"). val ());
});
// Obtain the Value of Html Radio
$ ("# BtnGetRadioValue"). click (function (){
If ($ ("input [name = 'radioselect']: checked"). val () = null ){
Alert ("select ");
Return false;
}
Alert ($ ("input [name = 'radioselect']: checked"). val ());
});
// Obtain the CheckBox Value
$ ("# BtnGetCheckBoxValue"). click (function (){
Var values = "";
$ ("Input [name = 'chkselect']"). each (function (){
If ($ (this). attr ("checked ")){
Values + = $ (this). val () + ",";
}
});
If (values = ""){
Alert ("select ");
Return false;
}
Values = values. substring (0, values. length-1); // remove the tail,
Alert (values );
});
// Select all
$ ("# BtnSelectAllOn"). click (function (){
$ ("Input [name = 'chkselect']"). each (function (){
$ (This). attr ("checked", true );
});
});
// Return
$ ("# BtnSelectAllOff"). click (function (){
$ ("Input [name = 'chkselect']"). each (function (){
$ (This). attr ("checked", false );
});
});
// Obtain the value of Multiple
$ ("# BtnGetMultipleValue"). click (function (){
Var values = "";
$ ("# Multiple1 option: selected"). each (function (){
Values + = $ (this). val () + ",";
})
Values = values. substring (0, values. length-1); // remove the tail,
Alert (values );
});
// Add the Option of Multiple
$ ("# BtnAddMultipleOption"). click (function (){
$ ("# Multiple1"). append ("<option value = 'ax'> AX </option> ");
});
// Remove the Option selected by Multiple
$ ("# BtnRemoveMultipleOption"). click (function (){
$ ("# Multiple1 option"). remove ("option: selected ");
});
// Obtain the Select Value
$ ("# BtnGetSelectValue"). click (function (){
Alert ($ ("# select1 option: selected"). val ());
});
// Add Select Option
$ ("# BtnAddSelectOption"). click (function (){
$ ("# Select1"). append ("<option value = 'bx '> BX </option> ");
});
// Remove the Select Option
$ ("# BtnRemoveSelectOption"). click (function (){
$ ("# Select1 option"). remove ("option: selected ");
});
});
</Script>