csharp，// 在ASP.NET中，使用jQuery获取RadioButtonList选中项的值和内容示例：$(document).ready(function() {， $("# input:checked").each(function() {， var value = $(this).val();， var content = $(this).next("label").text();， console.log("Value: " + value + ", Content: " + content);， });，});，“在ASP.NET中，使用jQuery获取RadioButtonList控件的成员选中内容和值是一个常见的需求，以下是详细的步骤和示例代码，帮助你实现这一功能。
创建ASP.NET页面
创建一个ASP.NET Web Forms页面，并在页面上添加一个RadioButtonList控件。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioButtonListExample.aspx.cs" Inherits="RadioButtonListExample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>RadioButtonList Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#getSelectedValue").click(function () {
var selectedIndex = $('input[name=radioGroup]:checked').val();
var selectedText = $('input[name=radioGroup]:checked').next("label").text();
alert("Selected Value: " + selectedIndex + ", Selected Text: " + selectedText);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Option 1" Value="1" />
<asp:ListItem Text="Option 2" Value="2" />
<asp:ListItem Text="Option 3" Value="3" />
</asp:RadioButtonList>
<br />
<asp:Button ID="getSelectedValue" runat="server" Text="Get Selected Value" OnClientClick="return false;" />
</div>
</form>
</body>
</html> 解释代码
HTML部分
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>：引入jQuery库。
$(document).ready(function () {...})：确保DOM完全加载后才执行JavaScript代码。
$("#getSelectedValue").click(function () {...})：为按钮绑定点击事件处理程序。
$('input[name=radioGroup]:checked').val()：获取选中的RadioButton的值。
$('input[name=radioGroup]:checked').next("label").text()：获取选中的RadioButton对应的标签文本。
ASP.NET部分
<asp:RadioButtonList ID="RadioButtonList1" runat="server">：定义一个RadioButtonList控件，并添加三个选项。
<asp:Button ID="getSelectedValue" runat="server" Text="Get Selected Value" OnClientClick="return false;" />：定义一个按钮，用于触发获取选中值的操作。OnClientClick="return false;"是为了阻止按钮的默认提交行为。
运行结果
当你在浏览器中打开这个页面并选择一个选项后，点击“Get Selected Value”按钮，将会弹出一个提示框，显示选中的值和文本。
相关问答FAQs
问题1：为什么需要使用$('input[name=radioGroup]:checked')来选择选中的RadioButton？
回答：
$('input[name=radioGroup]:checked')是jQuery的选择器语法，用于选择具有特定名称（name属性）的已选中的RadioButton，在这个例子中，所有RadioButton的name属性都是radioGroup，所以这个选择器可以找到当前选中的RadioButton。
问题2：如何修改代码以适应更多的RadioButtonList控件？
回答：
如果页面上有多个RadioButtonList控件，可以为每个控件设置不同的name属性，并在jQuery选择器中指定相应的名称。
$(document).ready(function () {
$("#getSelectedValue1").click(function () {
var selectedIndex1 = $('input[name=radioGroup1]:checked').val();
var selectedText1 = $('input[name=radioGroup1]:checked').next("label").text();
alert("Selected Value 1: " + selectedIndex1 + ", Selected Text 1: " + selectedText1);
});
$("#getSelectedValue2").click(function () {
var selectedIndex2 = $('input[name=radioGroup2]:checked').val();
var selectedText2 = $('input[name=radioGroup2]:checked').next("label").text();
alert("Selected Value 2: " + selectedIndex2 + ", Selected Text 2: " + selectedText2);
});
}); 在HTML部分，为每个RadioButtonList设置不同的name属性：
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Option 1" Value="1" />
<asp:ListItem Text="Option 2" Value="2" />
<asp:ListItem Text="Option 3" Value="3" />
</asp:RadioButtonList>
<asp:Button ID="getSelectedValue1" runat="server" Text="Get Selected Value 1" OnClientClick="return false;" />
<br />
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Text="Option A" Value="A" />
<asp:ListItem Text="Option B" Value="B" />
<asp:ListItem Text="Option C" Value="C" />
</asp:RadioButtonList>
<asp:Button ID="getSelectedValue2" runat="server" Text="Get Selected Value 2" OnClientClick="return false;" /> 通过这种方式，可以为每个RadioButtonList控件分别获取选中的值和文本。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1620991.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复