jQuery UI Checkboxradio 组件基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00340/article/details/148394002

jQuery UI Checkboxradio 组件基础教程

jquery-ui jquery/jquery-ui: 是 jQuery 的一个官方扩展库，提供了多种 UI 组件和交互功能，可以方便地在 Web 应用中实现丰富的 UI 交互。适合对 jQuery、UI 组件和想要实现高效 UI 开发的开发者。项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui

组件概述

jQuery UI 的 Checkboxradio 组件是一个用于美化和增强标准 HTML 复选框(checkbox)和单选按钮(radio button)的控件。它提供了统一的视觉风格和更好的用户体验，同时保持了原有的功能特性。

基本使用方法

要使用 Checkboxradio 组件，首先需要确保页面已经正确加载了 jQuery 和 jQuery UI 库。然后可以通过简单的 JavaScript 调用来初始化：

$( "input" ).checkboxradio();

这段代码会查找页面中所有的 <input> 元素，并将它们转换为 jQuery UI 风格的复选框或单选按钮。

HTML 结构示例

单选按钮组

<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>

标准复选框

<fieldset>
  <legend>Hotel Ratings: </legend>
  <label for="checkbox-1">2 Star</label>
  <input type="checkbox" name="checkbox-1" id="checkbox-1">
  <label for="checkbox-2">3 Star</label>
  <input type="checkbox" name="checkbox-2" id="checkbox-2">
  <label for="checkbox-3">4 Star</label>
  <input type="checkbox" name="checkbox-3" id="checkbox-3">
  <label for="checkbox-4">5 Star</label>
  <input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>

嵌套式复选框

<fieldset>
  <legend>Bed Type: </legend>
  <label for="checkbox-nested-1">2 Double
    <input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
  </label>
  <label for="checkbox-nested-2">2 Queen
    <input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
  </label>
  <label for="checkbox-nested-3">1 Queen
    <input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
  </label>
  <label for="checkbox-nested-4">1 King
    <input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
  </label>
</fieldset>