# Checkbox Demo

- order: 2

复选框设置数据源，可以设置选中和禁用项目，不提供非受限用法。

---

````js

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Touchable from 'nuke-touchable';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.GroupFruit = [
            {value: 'apple', label: '苹果'},
            {value: 'pear', label: '梨'},
            {value: 'orange', label: '橘子'}
        ];
        this.groupOptions =[
            {value: 'zj', label: '浙江'},
            {value: 'ah', label: '安徽'},
            {value: 'sh', label: '上海'}
        ]
        this.state = {
            fruitChecked:['apple'],
            groupChecked:[],
        }
    }

    onChange =(value) =>{
        console.log('=---->',value);
        this.setState({
            fruitChecked:value
        })
    }
    checkHandler(item){
        let index = this.state.groupChecked.indexOf(item.value);
        if(index > -1){
            this.state.groupChecked.splice(index,1)
            this.setState({
                groupChecked:this.state.groupChecked
            })
        }else{
            this.state.groupChecked.push(item.value);
            this.setState({
                groupChecked:this.state.groupChecked
            })
        }
    }
    render() {

        return (
            <Page title="Checkbox Group">
                <Page.Intro main="Group 普通用法"></Page.Intro>
                <View style={styles.main}>
                    <Checkbox.Group value={this.state.fruitChecked} onChange={ this.onChange } size="small" dataSource={ this.GroupFruit }  style={{marginRight:10,flexDirection:'row',alignItems:'center'}}></Checkbox.Group>
                </View>
                <Page.Intro main="为增大可点击区域，自行绘制"></Page.Intro>
                <View style={styles.main}>
                    {
                        this.groupOptions.map((item,index)=>{
                            let checked = this.state.groupChecked.indexOf(item.value) > -1 ;
                            return (
                                <Touchable style={[styles.demo_item,{flexDirection:'row'}]} onPress={() =>this.checkHandler(item)}>
                                    <Checkbox onChange={() =>this.checkHandler(item)} key={item.value} size="small" checked={checked}></Checkbox>
                                    <Text>{item.label}</Text>
                                </Touchable>
                            )
                        })
                    }
                </View>
            </Page>
        );
    }
}

const styles = {

    main:{
        width:750,
        marginTop:30,
        justifyContent:'center'
    },
    demo_item:{
        width:750,
        marginTop:30,
        alignItems:'center',
        backgroundColor:'#ffffff',
    }
}
render(<App/>);

````