一，效果图。

二，代码。

<!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. 设置Acad2008默认启动 win10设置默认cad2008启动 调试设置.

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\AutoCAD.Drawing.17\shell\open\command]@=&quo ...

  2. JavaScript学习之路-为什么要学习JavaScript语法

    版权声明:未经博主允许不得转载 前言 为什么要学习JavaScript语法,没有理由,因为工作需要,也为了成为全栈,那现在还是好好努力学习吧! 发展 说实话,JavaScript很好学也很重要,也很容 ...

  3. 本地调用QQ只需要一句代码

    如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...

  4. kill 结束进程

    kill 支持的信号 kill -1 重启进程 kill -9 终止进程 pkill 和 killall 的区别在于pkill 可以踢终端用户 pkill  -9  -t tty1

  5. kubernetes集群搭建（4）：node节点安装

    下列所有操作需要在所有node节点上操作,并注意红色部分的修改 1.node节点不需要安装etcd来存储相关信息 yum -y install flannel kubernetes 2.修改flann ...

  6. Qt之实现360安全卫士主界面代码开源

    匆匆一年又过去了,总结去年一年的节奏就是忙爆了:生活忙.工作忙,值得庆幸的是没有瞎忙:今天打开博客园查看我的博客,才发现几乎差不多一年时间没写博客了:博客文章就是记忆,就是曾经努力过的见证,感谢博客园 ...

  7. Windows系统CMD常用命令大全

    命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一 ...

  8. 恭喜"微微软"喜当爹，Github嫁入豪门。

    今天是 Github 嫁入豪门的第 2 天,炒得沸沸扬扬的微软 Github 收购事件于昨天(06月04日)尘埃落定,微软最终以 75 亿美元正式收购 Github. 随后,Gitlab 趁势带了一波 ...

  9. request和response简介

    Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象. 既然request对象代表http请求,那么我们获取浏览器提交过来 ...

  10. javaweb目录结构简介

    以上图说明: bbs目录代表一个web应用 bbs目录下的html,jsp文件可以直接被浏览器访问 WEB-INF目录下的资源是不能直接被浏览器访问的 web.xml文件是web程序的主要配置文件 所 ...