ASP.NET(C#)中的JQuery单选按钮

本文关键字：中的 JQuery 单选按钮 NET ASP | 更新日期: 2023-09-27 18:27:22

我想要一些JQuery风格的单选按钮。我现在已经有了演示代码，可以在最小的HTML页面中显示这一点，但我现在需要在ASP.NET C#页面中做到这一点。以下代码运行良好，REDACTED指向本地网络服务器：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
    <!-- CSS -->
    <link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <!-- JQuery -->
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>
<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
  </div>
</form>
</body>
</html>

但下面显示的是普通的、非JQuery样式的单选按钮。日期选择器执行操作（显示JQuery正在运行），消息以弹出窗口的形式显示在控制台中，显示功能正在运行，但按钮没有设置样式。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
    <meta charset="utf-8">
    <title>JQuery Test</title>
    <!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
    <!-- CSS -->
    <link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <!-- JQuery -->
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
    <!-- Radio button styling -->
    <script>
        $(function () {
            console.log("ready!");
            alert("Hi!");
            $("radio").buttonset();
        });
    </script>
</head>
<body id="hgs_body" runat="server">
    <p>Date Picker using JQuery:</p>
    <input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
    <!-- MAIN CONTENT -->
    <div id="main">
        <p>Radio Buttons using JQuery:</p>
        <form class="messages" id="messages" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server"/>
            <div id="radio">
                <input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
                <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
                <input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
            </div>
        </form>
    </div>
</body>
</html>

我认为这个问题与这个页面是ASP.NET有关，它的按钮是通过.aspx页面创建的（顺便说一句，.aspx.cs页面是空白的，用于演示）。但使用"$（function"的意义在于，它只在页面完全组装好后运行，所以单选按钮应该已经在那里了

我需要做什么，使造型工作？

（后续说明：我在这个例子中没有这样做，但实际的按钮是ASP.NET代码。不过这不是问题所在；请参阅答案。如果你有同样的问题，请注意，如果页面更新，你显然需要调用JQuery函数来重新设置它们的样式。）

ASP.NET(C#)中的JQuery单选按钮

在页面加载期间，您将buttonset属性分配给类型为tag : radio的元素。您的DOM中不存在此类元素。您需要将目标对准要应用按钮集的div。简而言之，您的选择器中缺少'#'。

$(function () {
            console.log("ready!");
            alert("Hi!");
            $("#radio").buttonset();
        });
相关文章：