本文概述

• 复选框组示例
• Radios Group iOS示例
• 单选按钮组原生示例
• 带有媒体列表视图

列表视图扩展使你可以在Framework7中创建复选框和单选输入。
以下是Framework7中使用的复选框和单选输入的列表：

指数	类型	描述
1)	Checkboxes group	它允许用户通过选中指定的选项列表。
2)	收音机组iOS	它允许用户从选项列表中仅选择一个选项。
3)	收音机组材质	“材质”主题也支持“收音机”组, 你必须为收音机添加其他图标。
4)	带有媒体列表视图	可以在媒体列表视图中同时使用复选框和广播组。

复选框组示例复选框组使用户可以通过选中指定选项列表来选择它们。
item-content必须是具有label-checkbox类的label元素, 并且复选框图标应位于item-media中。
例

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Checkboxes Group< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select one or more courses< /div> < div class = "list-block"> < ul> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Java" checked> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Andriod"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Oracle"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "ks-checkbox" value = "http://www.srcmini.com/Python"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
Radios Group iOS示例Radio Group iOS使用户可以从选项列表中仅选择一个选项。 item-content必须是具有label-radio类的label元素, 并且radio输入应该是item-content的第一个子元素。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Radios Group< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select any one< /div> < div class = "list-block"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Java" checked> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Andriod"> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Oracle"> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Python"> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
单选按钮组原生示例Framework7也支持单选按钮组。

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Radios group Material< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "center"> Radios Group< /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Radios group< /div> < div class = "list-block"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Java" checked> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Java< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Andriod"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Andriod< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Oracle"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Oracle< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "ks-radio" value = "http://www.srcmini.com/Python"> < div class = "item-media"> < i class = "icon icon-form-radio"> < /i> < /div> < div class = "item-inner"> < div class = "item-title"> Python< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

立即测试
带有媒体列表视图它使你可以在媒体列表视图中同时使用复选框和广播组。
例

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Checkboxes group< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "pages"> < div data-page = "home" class = "page navbar-fixed"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center"> Checkboxes and Radios< /div> < div class = "right"> < /div> < /div> < /div> < div class = "page-content"> < div class = "content-block-title"> Select Your Message< /div> < div class = "list-block media-list"> < ul> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/1"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message1< /div> < div class = "item-after"> 7:10< /div> < /div> < div class = "item-subtitle"> your order has been shipped< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/2"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message2< /div> < div class = "item-after"> 10:15< /div> < /div> < div class = "item-subtitle"> Bill Payments< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/3"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message3< /div> < div class = "item-after"> 19:14< /div> < /div> < div class = "item-subtitle"> New messages from John Doe< /div> < div class = "item-text"> Here, write your message details............< /div> < /div> < /label> < /li> < li> < label class = "label-checkbox item-content"> < input type = "checkbox" name = "my-checkbox" value = "http://www.srcmini.com/4"> < div class = "item-media"> < i class = "icon icon-form-checkbox"> < /i> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Message4< /div> < div class = "item-after"> 22:44< /div> < /div> < div class = "item-subtitle"> Car Insurance renewal< /div> < div class = "item-text"> Here, write your message details.............< /div> < /div> < /label> < /li> < /ul> < /div> < div class = "content-block-title"> Which is your favorite Magazine?< /div> < div class = "list-block media-list"> < ul> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/1" checked> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic3.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> India Today< /div> < div class = "item-after"> $10< /div> < /div> < div class = "item-subtitle"> Monthly< /div> < div class = "item-text"> Write magazine details........< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/2"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic2.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Business Today< /div> < div class = "item-after"> $20< /div> < /div> < div class = "item-subtitle"> Monthly< /div> < div class = "item-text"> Write magazine details.........< /div> < /div> < /label> < /li> < li> < label class = "label-radio item-content"> < input type = "radio" name = "my-radio" value = "http://www.srcmini.com/3"> < div class = "item-media"> < img src = "http://www.srcmini.com/framework7/images/pic.jpg" width = "80"> < /div> < div class = "item-inner"> < div class = "item-title-row"> < div class = "item-title"> Frontier< /div> < div class = "item-after"> $15< /div> < /div> < div class = "item-subtitle"> weakly< /div> < div class = "item-text"> Write magazine details........< /div> < /div> < /label> < /li> < /ul> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); < /script> < /body> < /html>

【Framework7复选框和单选按钮】立即测试

推荐阅读

• 

  为什么韩国总统往往不得善终？
• 

  买到这种螃蟹千万不能吃 正直爱洁蟹
• 

  睾丸静脉曲张症状怎么治疗 该吃什么好？
• 

  燕京理工学院学费多少钱一年本科 燕京理工学院学费2023
• 

  如何提高领导力和团队管理效率？
• 

  html5点击提交弹出窗口，h5点击按钮出现提示框
• 

  如何将手机数据远程备份到服务器？ 手机远程备份到服务器怎么弄
• 

  莓茶如何冲泡
• 

  《巫师3：狂猎》多方面通关感受心得分享
• 

  废旧电脑主板回收价格表 废旧电脑怎么处理
• 

  替组词 汉字替怎么组词
• 

  西门子热水器故障代码e10怎么处理？
• 

  家里蚤蝇怎么消灭彻底
• 

  微信微博禁止推广！
• 

  我爱我家作文300字 我爱我家范文三篇
• 

  鸣人六道模式没了 黄泉转身之术
• 

  商标注册流程及费用 中国商标年注册可以在哪里看，注册商标查询
• 

  膝盖|医生劝告：这5个行为是在给膝盖“施刑”，现在改还来得及
• 

  大雪节气的含义
• 

  云闪付的普通会员订单上显示有vlp特权

• Framework7表单禁用元素
• Framework7表单
• Ajax表单提交
• Framework7浮动操作按钮
• Framework7按钮
• Framework7 chip布局
• Framework7卡片
• 25个最佳免费视频切割器（修剪器）软件合集
• Windows和Mac的20款最佳免费DAW软件合集