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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
详解js类型判断
May 22 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
Vue常用指令详解分析
Aug 19 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php设计模式之命令模式的应用详解
2013/05/21 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
微信小程序合法域名配置方法
2019/05/06 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
社区灵活就业证明
2014/11/03 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python