layui/example/docs/zh-CN/components/checkbox.md

::: anchor :::

::: title 基本介绍 :::

::: describe 在一组可选项中进行多项选择时。 :::

::: title 基础使用 :::

::: demo 使用 lay-checkbox 标签, 创建一个复选框

<script> import { ref } from 'vue' export default { setup() { const checked1 = ref(false) return { checked1 } } } </script>

:::

::: title 默认样式 :::

::: demo

普通 <script> import { ref } from 'vue' export default { setup() { const checked2 = ref(false) return { checked2 } } } </script>

:::

::: title 复选框组 :::

::: demo

写作 画画 运动 <script> import { ref } from 'vue' export default { setup() { const checkeds = ref(['1','2']); const groupChange = function(val) { console.log("回调:" + JSON.stringify(val)) } return { checkeds, groupChange } } } </script>

:::

::: title 完整案例 :::

::: demo

写作 画画 运动 <script> import { ref } from 'vue' export default { setup() { const checked3 = ref(true); const checked4 = ref(true); const checked5 = ref(true); return { checked3, checked4, checked5 } } } </script>

:::

::: title 禁用状态 :::

::: demo

禁用 <script> import { ref } from 'vue' export default { setup() { const disabled = ref(true) const checked6 = ref(false); return { disabled,checked6 } } } </script>

:::

::: title 事件回调 :::

::: demo

回调 <script> import { ref } from 'vue' export default { setup() { const checked7 = ref(true); const change = function(isChecked) { console.log("是否选中:" + isChecked) } return { change, checked7 } } } </script>

:::

::: title Checkbox 属性 :::

::: table

属性	描述	可选值
name	原始属性 name	--
skin	主题	--
label	选中值	--
v-model	是否选中	true false
change	切换事件	isChecked : 当前状态

:::

::: title Checkbox 事件 :::

::: table

事件	描述	可选值
change	切换事件	isChecked : 当前状态

:::

::: previousNext checkbox :::