Checkbox

多选按钮。Checkbox UI 提供与WeLink规范一致的视图。

效果示例

    <div class="weui-cells__title">样例1</div>
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-cell-list weui-check__label" for="s11">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" />
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>主文体</p>
            </div>
        </label>
        <label class="weui-cell weui-cell-list weui-check__label" for="s12">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>主文体</p>
            </div>
        </label>
    </div>

    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-cell-list weui-check__label" for="s13">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox2" id="s13" />
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>主文体</p>
                <div class="weui-cell__explan">
                    此处是辅助说明文体，说明文本
                </div>
            </div>
        </label>
        <label class="weui-cell weui-cell-list weui-check__label" for="s14">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox2" class="weui-check" id="s14"  checked="checked" />
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>主文体</p>
                <div class="weui-cell__explan">
                    此处是辅助说明文体，说明文本
                </div>
            </div>
        </label>
    </div>

    <div class="weui-cells__title">样例2</div>
    <div class="weui-cells weui-cells_checkbox2">
        <label class="weui-cell weui-cell-list weui-check__label">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox3" checked="checked"/>
                <i class="weui-checkbox2-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>A、非常喜欢</p>
            </div>
        </label>
        <label class="weui-cell weui-cell-list weui-check__label">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox3" class="weui-check"  />
                <i class="weui-checkbox2-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>B、喜欢</p>
            </div>
        </label>
        <label class="weui-cell weui-cell-list weui-check__label">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox3" class="weui-check"  />
                    <i class="weui-checkbox2-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>C、一般</p>
                </div>
        </label>
        <label class="weui-cell weui-cell-list weui-check__label">
                <div class="weui-cell__hd">
                    <input type="checkbox" name="checkbox3" class="weui-check"  />
                    <i class="weui-checkbox2-checked"></i>
                </div>
                <div class="weui-cell__bd">
                    <p>D、不喜欢</p>
                </div>
        </label>
    </div>