Checkbox 复选框

定义／Definition

规则 / Rule

• 复选框一般出现在列表左侧；

• 如果两个相互排斥的选项，如“我同意”和“我不同意”，请将其合并使用单个复选框“我同意”。

代码演示

基本

import { Checkbox, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
let Test = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <WingBlank>
          <WhiteSpace />
          <Checkbox
            {...getFieldProps('a0', {
              initialValue: true,
              valuePropName: 'checked',
            })}
          />
          <WhiteSpace />
          <Checkbox
            {...getFieldProps('a1', {
              initialValue: false,
              valuePropName: 'checked',
            })}
          />
          <WhiteSpace />
          <Checkbox
            disabled
            {...getFieldProps('a2', {
              initialValue: true,
              valuePropName: 'checked',
            })}
          />
          <WhiteSpace />
          <Checkbox
            disabled
            {...getFieldProps('a3', {
              initialValue: false,
              valuePropName: 'checked',
            })}
          />
          <WhiteSpace />
        </WingBlank>
      </div>
    );
  },
});
Test = createForm()(Test);
ReactDOM.render(<Test />, mountNode);

列表项复选框

import { List, Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';
const CheckboxItem = Checkbox.CheckboxItem;
let Test = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List>
          <List.Header>表单多选项，普通列表中多选项</List.Header>
          <List.Body>
            <CheckboxItem
              {...getFieldProps('f1', {
                initialValue: true,
                valuePropName: 'checked',
              })}
            >
              签约
            </CheckboxItem>
            <CheckboxItem
              {...getFieldProps('f2', {
                initialValue: false,
                valuePropName: 'checked',
              })}
            >
              物料铺设
            </CheckboxItem>
            <CheckboxItem
              disabled
              {...getFieldProps('f3', {
                initialValue: false,
                valuePropName: 'checked',
              })}
            >
              机具维护（不能选）
            </CheckboxItem>
            <CheckboxItem
              disabled
              {...getFieldProps('f4', {
                initialValue: true,
                valuePropName: 'checked',
              })}
            >
              产品问题解决（必选）
            </CheckboxItem>
          </List.Body>
        </List>
      </div>
    );
  },
});
Test = createForm()(Test);
ReactDOM.render(<Test />, mountNode);

协议复选框

import { Checkbox } from 'antd-mobile';
import { createForm } from 'rc-form';
const AgreeItem = Checkbox.AgreeItem;
let Test = React.createClass({
  onClick() {
    console.log(this.props.form.getFieldsValue());
  },
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <AgreeItem
          {...getFieldProps('f5', {
            initialValue: false,
            valuePropName: 'checked',
          })}
        >同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意
        </AgreeItem>
        <AgreeItem
          {...getFieldProps('f6', {
            initialValue: true,
            valuePropName: 'checked',
          })}
        >同意<a>《信用支付服务合同》</a>
        </AgreeItem>
        <AgreeItem
          disabled
          {...getFieldProps('f7', {
            initialValue: false,
            valuePropName: 'checked',
          })}
        >未选中，不可编辑<a>《信用支付服务合同》</a>
        </AgreeItem>
        <AgreeItem
          disabled
          {...getFieldProps('f8', {
            initialValue: true,
            valuePropName: 'checked',
          })}
        >强制选中,不可编辑<a>《信用支付服务合同信用支付服务合同信用支付服务合同》</a>
        </AgreeItem>
      </div>
    );
  },
});
Test = createForm()(Test);
ReactDOM.render(<Test />, mountNode);

API

Checkbox

Checkbox.CheckboxItem

Checkbox.AgreeItem