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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
js实现表格单列按字母排序
Aug 12 Javascript
js不常见操作运算符总结
Nov 20 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&amp;mysql(五)
2006/10/09 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
vue axios 二次封装的示例代码
2017/12/08 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Python实现ping指定IP的示例
2018/06/04 Python
Python匿名函数及应用示例
2019/04/09 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
房屋租房协议书范本
2014/12/04 职场文书
简历自我评价模板
2015/03/11 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers