一,效果图。

二,代码。

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
<script src="js/app2.js"></script>
<script src="cordova.js"></script>
<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head> <body>
<div class="list">
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="python">
<div class="item-content">
Python
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="ruby">
<div class="item-content">
Ruby
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value=".net">
<div class="item-content">
.Net
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="java">
<div class="item-content">
Java
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="php">
<div class="item-content">
PHP
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</body> </html>

参考资料:《菜鸟教程》

【代码笔记】Web-ionic单选框的更多相关文章

  1. ionic-CSS:ionic 单选框

    ylbtech-ionic-CSS:ionic 单选框 1.返回顶部 1. ionic 单选框 ionic 单选按钮与标准 type="radio" 的 input元素类似.以下展 ...

  2. AngularJS(七):表单-单选框、下拉列表

    本文也同步发表在我的公众号“我的天空” 单选框 在AngulerJS中单选框的处理与复选框有不少相似之处,我们来看以下示例: <body ng-app="myApp" ng- ...

  3. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  4. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  5. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  6. Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  7. Android笔记(十五) Android中的基本组件——单选框和复选框

    单选框和多选框通常用来在设置用户个人资料时候,选择性别.爱好等,不需要用户直接输入,直接在备选选项中选择,简单方便. 直接看代码: <?xml version="1.0" e ...

  8. jquery 操作单选框,复选框,下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...

  9. 【MFC学习笔记-作业5-小数据库】【单选框,复选框,滚动条,列表框】

    界面已经实现完毕. 要完成的操作就是1.性别分组(2选1) 2.属性勾选 3.年龄通过滚动条调整 4.职称通过下方的列表框选择 5.输入姓名 6.存入左方的列表框 7.当选择左方列表框的人时,可以显示 ...

随机推荐

  1. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  2. SpringCloud总结

    初级入门使用轮廓,整理一下思路

  3. hadoop安装hbase

    1.安装hadoop hadoop安装请参考我的centoos 安装hadoop集群 在安装hadoop的基础上新增了两台slave机器,新增后的配置为 H30(192.168.3.238) mast ...

  4. Android核心技术Intent和数据存储篇

    女孩:上海站到了? 男孩:嗯呢?走向世界~ 女孩:Intent核心技术和数据存储技术? 男孩:对,今日就讲这个~ Intent是各个组件之间用来进行通信的,Intent的翻译为"意图&quo ...

  5. Javascript百学不厌 - 模块模式

    记录自己觉得重要又可能忘记的东西 用模块模式产生安全的对象: var serial_maker = function () { var preifx = ''; var seq = 0; return ...

  6. PHP、JS、Python,数据库 获取今天是星期几了?[开发篇]

    额,这个看起来是一个好简单的问题,但是真正到自己去一行行写的时候,又给忘了,妈蛋.有空就看看吧.今天是星期几?下面就来看看几种不同语言的实现吧! PHP语言 输出当前时间: echo date('Y- ...

  7. java相关技术问答(一)

    网上一些没有标准答案的面试题,我自己做的解答总结,有任何异议可以提出来~^_^,不断更新中... Springboot除了自动配置与传统的spring还有哪些不同 传统的springweb项目需要部署 ...

  8. Liferay7 BPM门户开发之5: Activiti和Spring集成

    参考文档: https://github.com/jbarrez/spring-boot-with-activiti-examplehttps://github.com/sxyx2008/spring ...

  9. Python又把GUI界面攻下了,今天就告诉你怎么玩

    0.引言 学Python这么久了,一直想做个界面出来,最近发现Python有个内置库tkinter,利用它可以很轻松做出一些简易的UI界面,首先来看Python官方对Tkinter的说明: The t ...

  10. spring boot -thymeleaf-域对象操作

    后台代码