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对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
js实现常见的工具条效果
Mar 02 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue实现锚点定位功能
Jun 29 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
初学JavaScript第二章
2008/09/30 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python制作exe文件简单流程
2019/01/24 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python绘制热力图示例
2019/09/27 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python批量启动多线程代码实例
2020/02/18 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
《雨霖铃》教学反思
2014/02/22 职场文书
21岁生日感言
2014/02/27 职场文书
鉴定评语大全
2014/05/05 职场文书
双拥工作宣传标语
2014/06/26 职场文书
企业贷款委托书格式
2014/09/12 职场文书
检讨书1000字
2014/10/11 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS