console
<body ontouchstart="" class=""><div><div class="demo-nav" style=""><div class="demo-nav__title">Checkbox</div><svg viewBox="0 0 1000 1000" class="demo-nav__back"><path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path></svg></div><section class="van-doc-demo-section demo-checkbox"><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">基础用法</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">禁用状态</h2><div role="checkbox" tabindex="-1" aria-checked="false" class="van-checkbox van-checkbox--disabled"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span></div><div role="checkbox" tabindex="-1" aria-checked="true" class="van-checkbox van-checkbox--disabled"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label van-checkbox__label--disabled">
复选框
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">自定义形状</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">
自定义颜色
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">自定义颜色</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: rgb(7, 193, 96); background-color: rgb(7, 193, 96);"></i></div><span class="van-checkbox__label">
自定义颜色
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">自定义大小</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">
自定义大小
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">自定义图标</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">
自定义图标
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">禁用文本点击</h2><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">
复选框
</span></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">复选框组</h2><div class="van-checkbox-group"><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 a</span></div><div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 b</span></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">水平排列</h2><div class="van-checkbox-group van-checkbox-group--horizontal"><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 a</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 b</span></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">限制最大可选数</h2><div class="van-checkbox-group"><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 a</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 b</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 c</span></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">全选与反选</h2><div class="van-checkbox-group"><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 a</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 b</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div><span class="van-checkbox__label">复选框 c</span></div></div><div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
全选
</span></div></button><button class="van-button van-button--info van-button--normal"><div class="van-button__content"><span class="van-button__text">
反选
</span></div></button></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">搭配单元格组件使用</h2><div class="van-checkbox-group"><div class="van-cell-group van-hairline--top-bottom"><div role="button" tabindex="0" class="van-cell van-cell--clickable"><div class="van-cell__title"><span>复选框 a</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div></div></div><div role="button" tabindex="0" class="van-cell van-cell--clickable"><div class="van-cell__title"><span>复选框 b</span></div><div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox"><div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success"></i></div></div></div></div></div></div></section></div><script src="https://b.yzcdn.cn/vant/async_chunks.a839cbb5.js"></script><script src="https://b.yzcdn.cn/vant/site-mobile.ea70a230.js"></script></body>