update radio demos

components/radio/demo/basic.md

@@ -9,9 +9,7 @@
 ````jsx
 var Radio = antd.Radio;
 
-React.render(
-<label>
-  <Radio/> Radio
-  </label>
-, document.getElementById('components-radio-demo-basic'));
+React.render(<label>
+  <Radio /> Radio
+</label>, document.getElementById('components-radio-demo-basic'));
 ````

components/radio/demo/disable.md

@@ -8,10 +8,35 @@ Radio 不可用。
 
 ````jsx
 var Radio = antd.Radio;
-var container = document.getElementById('components-radio-demo-disable');
 
-React.render(<div>
-  <Radio defaultChecked={false} disabled={true}/> &nbsp;&nbsp;
-  <Radio defaultChecked={true} disabled={true}/>
-</div>, container);
+function toggleDisabled() {
+  disabled = !disabled;
+}
+
+var App = React.createClass({
+  getInitialState() {
+    return {
+      disabled: false
+    };
+  },
+  toggleDisabled() {
+    this.setState({
+      disabled: !this.state.disabled
+    });
+  },
+  render() {
+    return <div>
+      <Radio defaultChecked={false} disabled={this.state.disabled} /> 不可用
+      <br />
+      <Radio defaultChecked={true} disabled={this.state.disabled} /> 不可用
+      <br />
+      <br />
+      <button className="ant-btn ant-btn-primary" onClick={this.toggleDisabled}>
+        Toggle disabled
+      </button>
+    </div>;
+  }
+});
+
+React.render(<App />, document.getElementById('components-radio-demo-disable'));
 ````

components/radio/demo/group.md

@@ -8,68 +8,48 @@ Radio 组合。
 
 ````jsx
 var Radio = antd.Radio;
-var container = document.getElementById('components-radio-demo-group');
-var RadioGroup=React.createClass({
+var RadioGroup = React.createClass({
   getInitialState() {
     return {
-      disabled: false,
-      r: 'a'
-    }
+    };
   },
   handleChange(e) {
     this.setState({
-      r: e.target.value
-    })
-  },
-  toggle() {
-    this.setState({
-      disabled: !this.state.disabled
+      value: e.target.value
     });
   },
   render() {
     return <div>
-      <div>
-        <p>
-          <label>
-            <Radio value="a"
-              checked = {this.state.r === 'a'}
-              onChange={this.handleChange}
-              disabled={this.state.disabled}/>
-          &nbsp; 0-10
-          </label>
-          <br/>
-          <label>
-            <Radio value="b"
-              checked = {this.state.r === 'b'}
-              onChange={this.handleChange}
-              disabled={this.state.disabled}/>
-          &nbsp; 11-20
-          </label>
-          <br/>
-          <label>
-            <Radio value="c"
-              checked = {this.state.r === 'c'}
-              onChange={this.handleChange}
-              disabled={this.state.disabled}/>
-          &nbsp; 21-30
-          </label>
-          <br/>
-          <label>
-            <Radio value="d"
-              checked = {this.state.r === 'd'}
-              onChange={this.handleChange}
-              disabled={this.state.disabled}/>
-          &nbsp; 31-40
-          </label>
-        </p>
-      </div>
-      <div>你选中的：{this.state.r}</div>
-      <p style={{"margin-top": 20}}>
-        <button className="ant-btn ant-btn-primary" style={{"margin-left": 20}} onClick={this.toggle}>toggle disabled</button>
+      <p>
+        <label>
+          <Radio value="a"
+            checked={this.state.value === 'a'}
+            onChange={this.handleChange} /> A
+        </label>
+        <br/>
+        <label>
+          <Radio value="b"
+            checked={this.state.value === 'b'}
+            onChange={this.handleChange} /> B
+        </label>
+        <br/>
+        <label>
+          <Radio value="c"
+            checked={this.state.value === 'c'}
+            onChange={this.handleChange} /> C
+        </label>
+        <br/>
+        <label>
+          <Radio value="d"
+            checked={this.state.value === 'd'}
+            onChange={this.handleChange} /> D
+        </label>
+      </p>
+      <p style={{"margin-top": 20}}>
+        你选中了：{this.state.value} 。
       </p>
-
     </div>;
   }
 });
-React.render(<RadioGroup/>, container);
+React.render(<RadioGroup />, document.getElementById('components-radio-demo-group'));
 ````

components/radio/index.md

@@ -1,19 +1,20 @@
-# radio
+# Radio
 
 - category: Components
 - chinese: 单选框
 
 ---
 
-多选框。
+单选框。
 
 ## 何时使用
 
--  `radio` 一般用于选中单个状态，需要和提交操作配合。
+- 用于在多个备选项中选中单个状态。
+- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
+
 
 ## API
 
-### Checkbox
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|