十六.单选框 radio、单项选择器 radio-group 和多选框 checkbox

╰+哭是因爲堅強的太久メ 2023-07-09 02:21 58阅读 0赞

# radio #

> 单选项目

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td></td> 
   <td>radio标识. 当radio选中时, radio-group的change事件会携带radio的value.</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>当前是否选中</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td>#90BB07</td> 
   <td>radio的颜色, 同css的color</td> 
  </tr> 
 </tbody> 
</table>

<radio-group bindchange="sex">
      <radio value="man" checked="true">男</radio>
      <radio value="woman">女</radio>
    </radio-group>
    <view>
      你选中的性别是{
       {sex}}
    </view>

Page({ 
      data: { 
        sex: "man"
      },
      sex: function (e) { 
        //获取单选框的值
        let sex = e.detail.value;
        this.setData({ 
          sex
        })
      }
    })

# radio-group #

> 单项选择器, 内部由多个radio组成

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bindchange</td> 
   <td>EventHandle</td> 
   <td>checkbox-group中选中项发生改变时触发change事件.</td> 
  </tr> 
 </tbody> 
</table>

# checkbox #

> 多选项目

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td></td> 
   <td>checkbox标识, 选中时触发checkbox-group的change事件, 并携带checkbox的value</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>当前是否选中, 可用来设置默认选中</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td>#09BB07</td> 
   <td>CheckBox的颜色, 同css的color</td> 
  </tr> 
 </tbody> 
</table>