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 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
简单分析js中的this的原理
Aug 31 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php提高网站效率的技巧
2015/09/29 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
如何一键升级Python所有包
2020/11/05 Python
最新茶叶店创业计划书
2014/01/14 职场文书
草船借箭教学反思
2014/02/03 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python