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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
js中的this的指向问题详解
Aug 29 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
js实现简单抽奖功能
Nov 24 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 读取文件乱码问题
2010/02/20 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python openpyxl模块的使用详解
2021/02/25 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
我未来的职业规划范文
2014/01/11 职场文书
特此通知格式
2015/04/27 职场文书
监护人证明
2015/06/19 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
Java SSM配置文件案例详解
2021/08/30 Java/Android
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js