ionic中单选按钮 : .item-radio input[type="radio"]

作者:本站编辑发布时间:2015-11-24 来源:本站原创点击数:160

单选按钮 : .item-radio input[type="radio"]

单选按钮用来从一组选择中作出仅仅一个选择：

radio

正如上图所见，单选按钮的可视部件包括两部分：选中图标（.radio-icon）和描述内容（.item-content），你可以在.item-content随便添加内容。

单选按钮基于HTML的radio input元素实现。使用如下的HTML模板声明单选按钮：

<any class="item-radio">    <input name="{group-name}" type="radio">    <any class="item-content">...</any>    <any class="radio-icon ion-checkmark"></any></any>

单选按钮通常不单独使用，将他们放入一个列表中：

<any class="list">    <any class="item item-radio">...</any>    <any class="item item-radio">...</any>    ...</any>

需要注意的是，group-name决定了单选按钮的分组，所以对于互斥的选择项，必须将它们的group-name设置为相同的名称。

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
 <div class="bar bar-header bar-assertive">
  <a class="button icon ion-ios-undo"></a>
  <h1 class="title">确认订单</h1>
 </div>
 <div class="scroll-content has-header padding">
  <div class="list">
   <div class="item item-divider"><b>请选择支付方式</b></div>
   <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">支付宝客户端支付</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
   <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">支付宝网页支付</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
   <label class="item item-radio">
    <input type="radio" name="group" checked>
    <div class="item-content">一键支付（无需支付宝账户）</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
  </div>
  <button class="button button-block button-assertive">立即购买</button>
 </div>
</body>
</html>

本文责任编辑：加入会员收藏夹点此参与评论>>