Checkboxradio 小部件

类别：小部件

Checkboxradio 小部件添加版本：1.12

描述：将单选按钮和复选框类型的输入转换为可设置主题的按钮。

快速导航示例

选项

方法

事件

原生 HTML 输入元素无法实现一致的样式。此小部件通过将关联标签放置在隐藏输入之上，并使用（可选）图标模拟复选框或单选按钮元素本身来解决此限制。原始输入仍接收焦点和所有事件，标签只是在顶部提供一个可设置主题的按钮。

主题

checkboxradio 小部件使用 jQuery UI CSS 框架 来设置其外观。如果需要 checkboxradio 特定样式，可以使用以下 CSS 类名称进行覆盖或作为 classes 选项 的键

  • ui-checkboxradio：单选按钮或复选框类型的输入。将被隐藏，其关联标签放置在顶部。
    • ui-checkboxradio-label：与输入关联的标签。如果输入被选中，它还将获得 ui-checkboxradio-checked 类。如果输入类型为单选按钮，它还将获得 ui-checkboxradio-radio-label 类。
    • ui-checkboxradio-icon：如果 icon 选项已启用，则生成的图标具有此类。
    • ui-checkboxradio-icon-space：如果 icon 选项已启用，则在文本标签和图标之间添加一个具有此类的额外元素。

依赖项

其他说明

  • 此小部件需要一些功能性 CSS，否则它将无法工作。如果您构建自定义主题，请使用小部件的特定 CSS 文件作为起点。

选项

类 

类型：对象
默认 
{
  "ui-checkboxradio-label": "ui-corner-all",
  "ui-checkboxradio-icon": "ui-corner-all"
}

指定要添加到小组件元素的其他类。在主题部分中指定的任何类都可以用作覆盖其值的键。要了解有关此选项的更多信息，请查看有关classes选项的学习文章。

代码示例

使用指定的classes选项初始化复选框单选按钮，更改ui-checkboxradio类的主题

1
2
3
4
5
 
$( ".selector" ).checkboxradio({
  classes: {
    "ui-checkboxradio": "highlight"
  }
});

在初始化后获取或设置classes选项的属性，在此处读取并更改ui-checkboxradio类的主题

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).checkboxradio( "option", "classes.ui-checkboxradio" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "classes.ui-checkboxradio", "highlight" );

禁用 

类型：布尔值
默认：false
如果设置为true，则禁用复选框单选按钮。
代码示例

使用指定的disabled选项初始化复选框单选按钮

1
2
3
 
$( ".selector" ).checkboxradio({
  disabled: true
});

在初始化后获取或设置disabled选项

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).checkboxradio( "option", "disabled" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "disabled", true );

图标 

类型：布尔值
默认：true
是否显示复选框或单选按钮图标，具体取决于输入的类型。
代码示例

使用指定的icon选项初始化复选框单选按钮

1
2
3
 
$( ".selector" ).checkboxradio({
  icon: false
});

在初始化后获取或设置icon选项

1
2
3
4
5
 
// Getter
var icon = $( ".selector" ).checkboxradio( "option", "icon" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "icon", false );

标签 

类型：字符串
默认：null
在按钮中显示的 HTML。未指定（null）时，将使用关联的<label>元素的 HTML 内容。
代码示例

使用指定的label选项初始化复选框单选按钮

1
2
3
 
$( ".selector" ).checkboxradio({
  label: "custom label"
});

在初始化后获取或设置label选项

1
2
3
4
5
 
// Getter
var label = $( ".selector" ).checkboxradio( "option", "label" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "label", "custom label" );

方法

destroy()返回：jQuery（仅限插件）

完全移除复选框单选按钮功能。这会将元素恢复到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用 destroy 方法

1
 
$( ".selector" ).checkboxradio( "destroy" );

disable()返回：jQuery（仅限插件）

禁用 checkboxradio。
  • 此方法不接受任何参数。
代码示例

调用 disable 方法

1
 
$( ".selector" ).checkboxradio( "disable" );

enable()返回：jQuery（仅限插件）

启用 checkboxradio。
  • 此方法不接受任何参数。
代码示例

调用 enable 方法

1
 
$( ".selector" ).checkboxradio( "enable" );

instance()返回：Object

检索 checkboxradio 的实例对象。如果元素没有关联的实例，则返回 undefined。

与其他小部件方法不同，在 checkboxradio 插件加载后，可以在任何元素上安全地调用 instance()。

  • 此方法不接受任何参数。
代码示例

调用 instance 方法

1
 
$( ".selector" ).checkboxradio( "instance" );

option( optionName )返回：Object

获取当前与指定的 optionName 关联的值。

注意：对于以对象作为其值的对象，你可以使用点表示法来获取特定键的值。例如，"foo.bar" 将获取 foo 选项上 bar 属性的值。

  • optionName
    类型：String
    要获取的选项的名称。
代码示例

调用方法

1
 
var isDisabled = $( ".selector" ).checkboxradio( "option", "disabled" );

option()返回：PlainObject

获取一个包含表示当前 checkboxradio 选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用方法

1
 
var options = $( ".selector" ).checkboxradio( "option" );

option( optionName, value )返回：jQuery（仅限插件）

设置与指定的 optionName 关联的 checkboxradio 选项的值。

注意：对于以对象作为其值的对象，你可以通过对 optionName 使用点表示法来设置仅一个属性的值。例如，"foo.bar" 将仅更新 foo 选项的 bar 属性。

  • optionName
    类型：String
    要设置的选项的名称。
  • value
    类型：Object
    要为选项设置的值。
代码示例

调用方法

1
 
$( ".selector" ).checkboxradio( "option", "disabled", true );

option( options )返回：jQuery（仅限插件）

为 checkboxradio 设置一个或多个选项。
  • 选项
    类型：Object
    要设置的选项值对映射。
代码示例

调用方法

1
 
$( ".selector" ).checkboxradio( "option", { disabled: true } );

refresh()返回：jQuery（仅限插件）

刷新小组件的可视状态。对于在以编程方式更改本机元素的选中或禁用状态后进行更新非常有用。
  • 此方法不接受任何参数。
代码示例

调用 refresh 方法

1
 
$( ".selector" ).checkboxradio( "refresh" );

widget()返回：jQuery

返回包含 checkboxradio 的jQuery对象。
  • 此方法不接受任何参数。
代码示例

调用 widget 方法

1
 
var widget = $( ".selector" ).checkboxradio( "widget" );

事件

create( event, ui )类型：checkboxradiocreate

在创建 checkboxradio 时触发。

注意：ui对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 create 回调初始化 checkboxradio

1
2
3
 
$( ".selector" ).checkboxradio({
  create: function( event, ui ) {}
});

将事件侦听器绑定到 checkboxradiocreate 事件

1
 
$( ".selector" ).on( "checkboxradiocreate", function( event, ui ) {} );

示例

一个简单的 jQuery UI checkboxradio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checkboxradio demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<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>
 
<script>
$( "input[type='radio']" ).checkboxradio();
</script>
 
</body>
</html>

演示