1. 首页
  2. 表单 Form
  3. form-checkbox 勾选

表单 · form-checkbox 勾选

input[data-type="checkbox"] 勾选控件：引擎把每个选项渲染为 .form-label（placeholder 作为文字标题，原隐藏输入移入标签内），多项同名互不影响，可多选。 预选由 data-value 决定：其以英文逗号分隔，包含当前 value 的项初始化即勾选。勾选态父级自动加 .hover 高亮。
表单家族 索引 base input textarea select number search checkbox radio switch choose multipled labels inpselect button label file files upload video image images imgurls date datetime color price sms sign listing json arrays infinite location latlng editor richtext line modifier data
本页内容 关键属性 基本勾选 预选与样式

关键属性

属性说明
data-typecheckbox（必填，声明勾选控件）
placeholder标签文字，缺省该项不渲染
name字段名，同名可多选
value该项提交值
data-value预选值，英文逗号分隔，含当前 value 即勾选
data-class追加到 form-label 的额外类

基本勾选

<div class="form-item"> <label class="label label-text pd-none">兴趣爱好（可多选）</label> <input type="hidden" data-type="checkbox" name="hobby" value="read" placeholder="读书"> <input type="hidden" data-type="checkbox" name="hobby" value="sport" placeholder="运动"> <input type="hidden" data-type="checkbox" name="hobby" value="travel" placeholder="旅行" data-value="travel"> </div>

预选与样式

<div class="form-item"> <label class="label label-text pd-none">常用技能</label> <input type="hidden" data-type="checkbox" name="skill" value="js" placeholder="JS" data-value="js"> <input type="hidden" data-type="checkbox" name="skill" value="php" placeholder="PHP"> <input type="hidden" data-type="checkbox" name="skill" value="sql" placeholder="SQL" data-value="sql"> </div>
上一张 form-search 搜索框
下一张 form-radio 单选
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页