```html
<div style="padding: 15px 0;" class="demo-block" id="checker-demo1">
  <lx-divider>radio:no default value</lx-divider>
  <lx-checker
    v-model="demo1"
    default-item-class="demo1-item"
    selected-item-class="demo1-item-selected"
  >
    <lx-checker-item
      v-for="val in demo1Radio"
      :key="val"
      :value="val"
    >
      {{ val }}
    </lx-checker-item>
    <!-- <lx-checker-item :value="2">2</lx-checker-item> -->
    <!-- <lx-checker-item :value="3">3</lx-checker-item> -->
  </lx-checker>
  <br>
  <span>current value is: {{ demo1 }}</span>
  <br>

  <lx-divider>checkbox</lx-divider>
  <lx-checker
    v-model="demo1Checkbox"
    type="checkbox"
    default-item-class="demo1-item"
    selected-item-class="demo1-item-selected"
  >
    <lx-checker-item :value="1">
      1
    </lx-checker-item>
    <lx-checker-item :value="2">
      2
    </lx-checker-item>
    <lx-checker-item :value="3">
      3
    </lx-checker-item>
  </lx-checker>
  <br>
  <span>current value is: {{ JSON.stringify(demo1Checkbox) }}</span>
  <br>

  <lx-divider>checkbox with max limit</lx-divider>
  <lx-checker
    v-model="demo1CheckboxMax"
    :max="2"
    type="checkbox"
    default-item-class="demo1-item"
    selected-item-class="demo1-item-selected"
  >
    <lx-checker-item value="1">
      1
    </lx-checker-item>
    <lx-checker-item value="2">
      2
    </lx-checker-item>
    <lx-checker-item value="3">
      3
    </lx-checker-item>
  </lx-checker>
  <br>
  <span>current value is: {{ JSON.stringify(demo1CheckboxMax) }}</span>
  <br>

  <lx-divider>default value 2</lx-divider>
  <lx-checker
    v-model="demo2"
    default-item-class="demo2-item"
    selected-item-class="demo2-item-selected"
  >
    <lx-checker-item value="1">
      1
    </lx-checker-item>
    <lx-checker-item value="2">
      2
    </lx-checker-item>
    <lx-checker-item value="3">
      3
    </lx-checker-item>
  </lx-checker>
  <br>
  <span>current value is: {{ demo2 }}</span>
  <br>
  <span>current value is: {{ demo3 }}</span>
  <br>
  <lx-divider>used in a popup</lx-divider>
  <lx-group>
    <lx-cell
      title="select color"
      :value="demo4"
      is-link
      @click.native="showPopup=true"
    />
  </lx-group>
  <lx-popup
    v-model="showPopup"
    class="checker-popup"
  >
    <div style="padding:10px 10px 40px 10px;">
      <p style="padding: 5px 5px 5px 2px;color:#888;">
        Colors
      </p>
      <lx-checker
        v-model="demo4"
        default-item-class="demo4-item"
        selected-item-class="demo4-item-selected"
        disabled-item-class="demo4-item-disabled"
        @on-item-click="showPopup=false"
      >
        <lx-checker-item value="花跟叶">
          花跟叶
        </lx-checker-item>
        <lx-checker-item value="鸟与树">
          鸟与树
        </lx-checker-item>
        <lx-checker-item value="我和你">
          我和你
        </lx-checker-item>
        <lx-checker-item
          value="全套礼品装"
          disabled
        >
          全套礼品装
        </lx-checker-item>
      </lx-checker>
    </div>
  </lx-popup>

  <lx-divider>A real world radio example {{ demo5 }}</lx-divider>
  <lx-checker
    v-model="demo5"
    default-item-class="demo5-item"
    selected-item-class="demo5-item-selected"
  >
    <lx-checker-item
      v-for="i in [1, 2, 3]"
      :key="i"
      :value="i"
    >
      ￥{{ i*300 }}
    </lx-checker-item>
  </lx-checker>
  <br>
  <lx-divider>A real world checkbox example {{ JSON.stringify(demo6) }}</lx-divider>
  <lx-checker
    v-model="demo6"
    type="checkbox"
    default-item-class="demo5-item"
    selected-item-class="demo5-item-selected"
  >
    <lx-checker-item
      v-for="i in [1, 2, 3]"
      :key="i"
      :value="i"
    >
      {{ ['good', 'nice','awesome'][i - 1] }}
    </lx-checker-item>
  </lx-checker>
</div>

<script>
// Checker.md

new Vue({
  el: '#checker-demo1',
  data: {
    demo1: '1',
    demo1Radio: [1, 2, 3],
    demo1Checkbox: [2, 1],
    demo1CheckboxMax: ['2', '3'],
    demo2: '2',
    demo3: '',
    demo4: '花跟叶',
    showPopup: false,
    demo5: 1,
    demo6: [2, 3]
  }
})
</script>

<style>
.checker-popup {
  background: rgba(255,255,255,0.5);
}
.demo1-item {
  border: 1px solid #ccc;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}
.demo2-item {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
}
.demo2-item-selected {
  border-color: green;
}
.demo3-item {
  padding: 5px;
  font-size: 0;
}
.demo3-item-selected {
  outline: 1px solid #8B8AEE;
}
.demo4-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.demo4-item-selected {
  background-color: #FF3B3B;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}
.demo5-item {
  width: 100px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6px;
}
.demo5-item-selected {
  background: #ffffff url(/static/image/assets/demo/checker/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
</style>
```