基于jquery自定义的漂亮单选按钮RadioButton

下面我将详细讲解基于 jQuery 自定义的漂亮单选按钮 RadioButton 的完整攻略。

环境准备

在开始前，需要准备以下软件和库文件:

• jQuery
• Font Awesome
• HTML / CSS / JavaScript 编辑器

HTML 结构

首先，我们需要定义一组单选框，每个单选框对应一个选项，然后为每个单选框绑定一个唯一的 ID 用于后续的操作。代码如下：

<div class="custom-radio">
  <input type="radio" id="radio1" name="radio-group" value="option1">
  <label for="radio1">选项1</label>
</div>
<div class="custom-radio">
  <input type="radio" id="radio2" name="radio-group" value="option2">
  <label for="radio2">选项2</label>
</div>
<div class="custom-radio">
  <input type="radio" id="radio3" name="radio-group" value="option3">
  <label for="radio3">选项3</label>
</div>

CSS 样式

接下来，让我们来编写 CSS 样式，生成漂亮的单选按钮。我们使用 Font Awesome 图标库来渲染单选按钮。以下是样式代码：

.custom-radio {
  display: inline-block;
}

.custom-radio label {
  font-size: 16px;
  cursor: pointer;
  color: #333;
  padding-left: 25px;
  position: relative;
}

.custom-radio label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ddd;
  position: absolute;
  top: 2px;
  left: 0px;
}

.custom-radio input[type="radio"] {
  display: none;
}

.custom-radio input[type="radio"]:checked + label:before {
  content: "\f00c";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

以上代码中，我们定义了 .custom-radio 元素为 inline-block，让多个单选框可以在一行中显示。

对于每个单选框的 label 元素，我们使用 position: relative 定位，然后使用 :before 伪元素生成一个空心圆形，用于后续的样式操作。每个 label 元素都会对应一个 input[type="radio"] 元素，在 CSS 中我们使用 :checked 伪类选择已选中的单选框，并改变其圆形图标的样式。

其中，我们使用了 Font Awesome 图标库中的 “✓” 字符，通过将其设置为伪元素的 content 属性，可以方便地渲染出一个漂亮的实心圆形。

JavaScript 代码

最后，我们需要编写一些 JavaScript 代码来实现用户点击单选框时的交互效果。以下是示例代码：

$(document).ready(function() {
  $(".custom-radio").click(function() {
    $(this).find("input[type='radio']").prop("checked", true);
    $(".custom-radio label:before").css({
      "background-color": "#fff",
      "color": "#333",
      "border-color": "#ddd"
    });
    $(this).find("label:before").css({
      "background-color": "#007bff",
      "color": "#fff",
      "border-color": "#007bff"
    });
  });
});

以上代码中，我们首先使用 $(document).ready 函数来确保页面加载完毕后再执行代码。

然后，我们使用 jQuery 的 click 函数来为所有自定义单选按钮绑定点击事件。当用户点击某个单选按钮时，我们使用 prop 函数将其对应的 input 元素的 checked 属性设为 true，表示选中该单选项。

接着，我们遍历所有单选框的 label:before 伪元素，重置它们的背景色、文字颜色和边框颜色，避免用户取消某个单选框时，其样式不正确。

最后，我们将当前点击的单选框的 label:before 伪元素的背景色、文字颜色和边框颜色设置为选中状态。

示例说明

以下是两个示例，演示了如何使用 jQuery 自定义的漂亮单选按钮 RadioButton。

示例一

在这个示例中，我们将自定义单选按钮应用于一个表单中，用户可在表单中选择自己的性别。

<form>
  <div class="custom-radio">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男性</label>
  </div>
  <div class="custom-radio">
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女性</label>
  </div>
</form>

以上代码中，我们定义了一个包含两个单选框的表单，用户可在其中选择男性或女性。

在 CSS 样式和 JavaScript 代码实现后，用户将能够在页面上看到漂亮的单选框，并且在点击某个单选框时，它的样式将会改变，表示选中该单选项。

示例二

在这个示例中，我们将自定义单选按钮用于一个投票的页面，用户可根据自己的兴趣爱好选择感兴趣的选项。

<div>
  <div class="custom-radio">
    <input type="radio" id="option1" name="interest" value="option1">
    <label for="option1">选项1</label>
  </div>
  <div class="custom-radio">
    <input type="radio" id="option2" name="interest" value="option2">
    <label for="option2">选项2</label>
  </div>
  <div class="custom-radio">
    <input type="radio" id="option3" name="interest" value="option3">
    <label for="option3">选项3</label>
  </div>
  <div class="custom-radio">
    <input type="radio" id="option4" name="interest" value="option4">
    <label for="option4">选项4</label>
  </div>
</div>

以上代码中，我们定义了一个包含四个单选框的投票页面，每个单选框都对应一个选项。

在 CSS 样式和 JavaScript 代码实现后，用户将能够在页面上看到漂亮的单选框，并且在点击某个单选框时，它的样式将会改变，表示选中该单选项。用户选择完毕后，我们可以使用 JavaScript 代码获取选中的值，然后将其提交到服务器进行处理。

阅读剩余 71%