前台主要代码:
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
function check(opt) {
$("input:radio[value='" + opt + "']").prop('checked', 'true');
}
</script>
<asp:GridView ID="GridView1" runat="server" DataKeyNames="id" onrowdatabound="GridView1_RowDataBound" >
<Columns>
<asp:TemplateField HeaderText="选择" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<input id="radIsListShow" name="radionName" type="radio" value='<%# DataBinder.Eval(Container, "DataItem.id") %>'/>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
后台代码:
1、在GridView_RowDataBound事件里给每行添加点击事件
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//添加行单击事件
string id= GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
e.Row.Attributes.Add("onclick", "check('" + id+ "')");
}
}
实现效果:
注意事项:
1、行点击事件check()必须写在引用jquery文件之后,否则会报“$ is not defined”的错误。因为$是Jquery定义的字符,必须先引用了才能用。
2、因为每个radio的id和name都一样,只有value是不同的,所以通过value来设置哪个radio的被选中。
3、不能把这个radio设为服务器控件,即不能加runat=“server”,加了之后无法实现单选效果。
4、radio的name要保持一样才能实现单选功能。
5、js根据值控制radio选中状态,用prop而不要用attr。如果是这样写会出现失灵的情况:
$(“input:radio[value=’” + opt + “’]”).attr(‘checked’, ‘true’);