📅 最后修改于: 2023-12-03 15:23:54.420000 🧑 作者: Mango
jQuery Mobile 是一款基于 HTML5 开发的 JavaScript 库，致力于为移动设备提供高度可定制的用户界面，而其中的单选按钮是常用的 UI 组件之一。
首先，我们需要在 HTML 中添加单选按钮的结构。使用 <fieldset> 元素可以将单选按钮分组，方便用户选择。使用 <input> 元素创建单选按钮。单选按钮必须拥有相同的 name 属性，但 value 属性应该不同。
<fieldset>
<legend>选择一个颜色:</legend>
<input type="radio" name="color" id="red" value="red">
<label for="red">红色</label>
<input type="radio" name="color" id="green" value="green">
<label for="green">绿色</label>
<input type="radio" name="color" id="blue" value="blue">
<label for="blue">蓝色</label>
</fieldset>
接下来，我们需要添加 jQuery 和 jQuery Mobile 库的引用。如果你使用的是 CDN，就可以像下面这样添加：
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
jQuery Mobile 的单选按钮有默认的样式，不过我们可以通过添加 data-role="none" 属性来禁用它，然后自定义样式。
<fieldset data-role="none">
<legend>选择一个颜色:</legend>
<input type="radio" name="color" id="red" value="red">
<label for="red">红色</label>
<input type="radio" name="color" id="green" value="green">
<label for="green">绿色</label>
<input type="radio" name="color" id="blue" value="blue">
<label for="blue">蓝色</label>
</fieldset>
然后，在 CSS 中添加自定义样式。
.ui-radio {
display: inline-block;
vertical-align: middle;
margin-right: 15px;
}
.ui-radio label {
position: relative;
padding-left: 35px;
}
.ui-radio input[type="radio"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -10px;
margin-left: -15px;
width: 30px;
height: 20px;
opacity: 0;
}
.ui-radio input[type="radio"]:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #999;
background-color: #fff;
}
.ui-radio input[type="radio"]:checked:before {
background-color: #37b6d3;
border-color: #37b6d3;
}
最后，来看一下效果吧！以下是制作后的基本单选按钮的效果展示：
使用 jQuery Mobile 制作基本单选按钮需要做以下几个步骤：
<input> 元素创建单选按钮，并将其分组。希望对你有所帮助！