GridView行单击事件:点击行任意位置都选中该行单选按钮(JS控制radio选中状态)

前台主要代码:

<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’);

参考文章:单选框radio总结(获取值、设置默认选中值、样式)

猜你喜欢

转载自blog.csdn.net/weixin_38091174/article/details/86300508