ionic中 单选按钮 : .item-radio input[type="radio"]
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
单选按钮 : .item-radio input[type="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>