Bootstrap3 多选和单选框(checkbox)


Posted in Javascript onDecember 29, 2016

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。

设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

默认外观(堆叠在一起)

<div class="checkbox">
 <label>
 <input type="checkbox" value="">
 Option one is this and that—be sure to include why it's great
 </label>
</div>
<div class="checkbox disabled">
 <label>
 <input type="checkbox" value="" disabled>
 Option two is disabled
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 Option one is this and that—be sure to include why it's great
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 Option two can be something else and selecting it will deselect option one
 </label>
</div>
<div class="radio disabled">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
 Option three is disabled
 </label>
</div>

以上所述是小编给大家介绍的Bootstrap3 多选和单选框(checkbox),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 #Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 #Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 #Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 #Javascript
jQuery实现6位数字密码输入框
Dec 29 #Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
You might like
PHP个人网站架设连环讲(三)
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
幼儿园新学期寄语
2014/01/18 职场文书
网吧消防安全责任书
2014/07/29 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
文明单位申报材料
2014/12/23 职场文书
大学生个人学年总结
2015/02/15 职场文书
大学生村官入党自传
2015/06/26 职场文书