# layui-switchSelect

**Repository Path**: wolf-code/layui-switch-select

## Basic Information

- **Project Name**: layui-switchSelect
- **Description**: layui 中 radio 和 switch 样式的切换显示
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-23
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 组件功能

> 可随意切换 `radio` 和 `select` 效果

## 组件使用

#### 可查看 `example/test.html` 示例

```js

layui.config({
    base: '../switchSelect/' // 根据实际情况修改路径
}).extend({
    switchSelect: 'switchSelect',
});

layui.use(['switchSelect'], function () {
    let switchSelect = layui.switchSelect;

    // 初始化组件
    new switchSelect({
        elem: '#switchSelectDemo',                  // 容器元素
        data: {1: 'AAA', 2: 'BBB', 3: 'CCC'},       // 数据
        default: 1,                                 // 默认选中项
        name: 'name',                               // 表单name
        target: 'radio',                            // 默认样式 radio select
        onSwitch: function (target) {
            console.log('切换到:', target);
        }
    });
});
```

## 效果参考

![](/images/demo.png)

> [https://thinkphp.easyadmin8.top/admin](https://thinkphp.easyadmin8.top/admin)
>
> 点击 `商城管理` - `商品管理` - `编辑` - `商品分类3` 查看效果