1. First prepare the interface code:
Copy Code code as follows:
<form id= "Form1" runat= "Server" >
<div align= "Left" >
<fieldset style= "width:300px; height:200px; " >
<table cellpadding= "0" cellspacing= "0" border= "0" >
<tr>
<TD style= "width:10px" >
</td>
<td>
<p>
Update URL:</p>
<asp:radiobuttonlist id= "Rblurl" runat= "Server" >
<asp:listitem text= "Sina" value= "http://www.sina.com.cn" ></asp:ListItem>
<asp:listitem text= "Baidu" value= "http://www.baidu.com" ></asp:ListItem>
<asp:listitem text= "NetEase" value= "http://www.163.com" ></asp:ListItem>
</asp:RadioButtonList>
<br/>
<asp:hyperlink id= "HyperLink" runat= "Server" > click here </asp:HyperLink>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
2.RadioButtonList is converted to <TABLE/>, its members are converted to <input type= "Radio"/>, and the following is the scripting code that implements changing the URL value:
Copy Code code as follows:
<title>Recipe10</title>
<script src= "Scripts/jquery.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("Input[type=radio]"). Bind ("Change", function () {
$ ("#<%=hyperlink.clientid%>"). attr ("href", $ (this). Val ());
});
});
</script>
3. Achieve the interface effect:
4. In addition, we can implement the bind change event through the following code:
Copy Code code as follows:
$ ("Input=[type=radio]"). Live ("Change", function () {
$ ("a"). attr ("href", $ (this). Val ());
});
The difference between the 5.live () and bind () functions:
The live () function can attach events to current and future page elements. However, the bind () function can only attach events to a page element that has already been loaded.
This means that bind () is suitable for page static elements while live () is suitable for page static and dynamic elements.