Checkbox 多选框

一组备选项中进行多选

何时使用

• 在一组可选项中进行多项选择时；
• 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

import { HiCheckbox } from 'hi-kits/checkbox'

基本用法

Checkbox

<h-checkbox>Checkbox</h-checkbox>

Expand Copy Copy

不可用

Checkbox

<h-checkbox disabled>Checkbox</h-checkbox>

Expand Copy Copy

受控的 Checkbox

checkbox

<h-checkbox>checkbox</h-checkbox>
<h-switch onchange="this.previousElementSibling.disabled = this.checked"></h-switch>

Expand Copy Copy

多选框组

通常多个h-checkbox出现，有一个相同的name，表示同一组，可以通过name来获取当前组的选中

Html Css Javascript Python Php Dart Swift 获取选中状态

<h-checkbox name="lang" checked>Html</h-checkbox>
<h-checkbox name="lang">Css</h-checkbox>
<h-checkbox name="lang">Javascript</h-checkbox>
<h-checkbox name="lang">Python</h-checkbox>
<h-checkbox name="lang">Php</h-checkbox>
<h-checkbox name="lang">Dart</h-checkbox>
<h-checkbox name="lang">Swift</h-checkbox>
<h-button type="primary" onclick="HiMessage.info({
    content: Array.from(document.querySelectorAll('h-checkbox[name=lang][checked]')).map(el=>el.textContent)
})">获取选中状态</h-button>

Expand Copy Copy

h-checkbox-group组件

新增h-checkbox-group组件，表示同一组

React Vue Angular Flutter Swift

  <h-checkbox-group name="books" defaultvalue="React,Angular" id="checkgroup">
    <h-checkbox>React</h-checkbox>
    <h-checkbox>Vue</h-checkbox>
    <h-checkbox>Angular</h-checkbox>
    <h-checkbox>Flutter</h-checkbox>
    <h-checkbox>Swift</h-checkbox>
  </h-checkbox-group>
  

Expand Copy Copy

h-checkbox

参数	说明	类型	可选值	默认值
value	当前选中值	string	-	-
checked	选中状态	boolean	-	-
indeterminate	不确定状态	boolean	-	-
disabled	不可用状态	boolean	-	-
onchange	变化时回调函数	Function(e:Event)	-	-
onfocus	聚焦时回调函数	Function(e:Event)	-	-
onblur	失焦时回调函数	Function(e:Event)	-	-

h-checkbox-group

参数	说明	类型	可选值	默认值
defaultvalue	默认选中的value	string	-	-
onchange	变化时回调函数	Function(e:Event)	-	-