EasyUI jQuery 单选按钮部件

EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个Radiobutton。Radiobutton widget是用来做一个单选按钮，可以用来选择需要的选项。一个组中只能选择一个选项。

EasyUI for jQuery的下载：

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-radiobutton">

属性:

width: 它是要制作的Radiobutton组件的宽度。
height：是要制作的Radiobutton组件的高度。
value。它是与要做的Radiobutton绑定的默认值。
checked:它定义了Radiobutton是否被选中。
disabled。它定义了是否要禁用要制作的Radiobutton。
label。它是与要做的Radiobutton绑定的标签。
labelWidth：是标签的宽度。
labelPosition。它是标签的位置。可能的值是 “之前”、”之后 “和 “顶部”。
labelAlign：它是标签的对齐方式。可能的值是 “左 “和 “右”。

事件:

onChange。当值被改变时，它就会发生。

方法:

options。它返回选项对象。
setValue。它为Radiobutton设置值。
disable:它禁用该组件。
Enable。它能使该组件生效。
checked。它检查该组件。
unchecked。它取消了对该组件的检查。
clear: 它清除了’检查’的值。
reset。它重置了 “检查 “值。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例:

<html>
<head>
  
  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/mobile.css">
  
  <link rel="stylesheet"
        type="text/css"
        href="themes/icon.css">
  
  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js">
  </script>
  
  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>
  
  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery radiobutton widget</h3>
  
  <form id="gfg">
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language" 
             value="HTML" 
             label="HTML">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="JavaScript"
             label="JavaScript">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="jQuery"
             label="jQuery">
    </div>
  </form>
</body>
</html>

输出:

EasyUI jQuery 辐射按钮部件