jQuery Mobile Checkboxradio Widget 增强选项

jQuery Mobile Checkboxradio Widget是一个用于创建复选框和单选框的jQuery插件，可以帮助开发者更轻松地实现选项选择功能。此外，它还提供了一些增强选项，使得开发者可以更加自定义和美化选项的样式和行为。

特性

• 支持创建单选框和复选框
• 可以自定义选项的样式和标签
• 支持水平和垂直布局
• 提供对选择状态的事件监听

安装

jQuery Mobile Checkboxradio Widget可以通过多种方式引入到项目中：

• 使用CDN引入：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入jQuery Mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

<!-- 引入jQuery Mobile Checkboxradio Widget -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

• 下载并引入本地文件：

<!-- 引入jQuery -->
<script src="path/to/jquery.min.js"></script>

<!-- 引入jQuery Mobile -->
<link rel="stylesheet" href="path/to/jquery.mobile.min.css" />
<script src="path/to/jquery.mobile.min.js"></script>

<!-- 引入jQuery Mobile Checkboxradio Widget -->
<link rel="stylesheet" href="path/to/jquery.mobile.checkboxradio.min.css" />
<script src="path/to/jquery.mobile.checkboxradio.min.js"></script>

使用

基本使用

复选框：

<fieldset data-role="controlgroup">
  <legend>请选择颜色：</legend>
  <input type="checkbox" name="red" id="red">
  <label for="red">红色</label>
  <input type="checkbox" name="green" id="green">
  <label for="green">绿色</label>
  <input type="checkbox" name="blue" id="blue">
  <label for="blue">蓝色</label>
</fieldset>

单选框：

<fieldset data-role="controlgroup">
  <legend>请选择性别：</legend>
  <input type="radio" name="gender" id="male" value="male">
  <label for="male">男</label>
  <input type="radio" name="gender" id="female" value="female">
  <label for="female">女</label>
</fieldset>

自定义标签

你可以通过修改标签的HTML内容来自定义复选框和单选框的样式和内容。

<fieldset data-role="controlgroup">
  <legend>请选择语言：</legend>
  <input type="checkbox" name="java" id="java">
  <label for="java">
    <img src="path/to/java-logo.png" alt="Java" style="width: 20px; height: 20px;">
    Java
  </label>
  <input type="checkbox" name="python" id="python">
  <label for="python">
    <img src="path/to/python-logo.png" alt="Python" style="width: 20px; height: 20px;">
    Python
  </label>
  <input type="checkbox" name="javascript" id="javascript">
  <label for="javascript">
    <img src="path/to/javascript-logo.png" alt="JavaScript" style="width: 20px; height: 20px;">
    JavaScript
  </label>
</fieldset>

自定义属性

你还可以通过data-*属性来自定义复选框和单选框的样式和行为。

<input type="checkbox" name="spring" id="spring" data-mini="true" data-iconpos="right">
<label for="spring">Spring</label>

<input type="radio" name="gender" id="male" value="male" data-mini="true" data-iconpos="right">
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female" data-mini="true" data-iconpos="right">
<label for="female">女</label>

监听选择事件

你可以通过jQuery来监听复选框和单选框的选择状态变化。

$(document).on('change', '[type="checkbox"]', function() {
  if ($(this).is(':checked')) {
    console.log($(this).val() + '被选中了');
  } else {
    console.log($(this).val() + '被取消选中了');
  }
});

$(document).on('change', '[type="radio"]', function() {
  console.log($(this).val() + '被选中了');
});

结论

jQuery Mobile Checkboxradio Widget是一个非常便捷的选项选择插件，可以减少开发者的工作量，并且可以通过自定义属性和事件监听等方式实现更加个性化和丰富的用户体验。