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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js实现无缝循环滚动
Jun 23 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Vue渲染过程浅析
Mar 14 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
使用JS前端技术实现静态图片局部流动效果
Aug 05 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js返回顶部实例分享
2016/12/21 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
市场部专员岗位职责
2013/11/30 职场文书
安全生产先进个人材料
2014/02/06 职场文书
银行贷款承诺书
2014/03/29 职场文书
运动会方阵口号
2014/06/07 职场文书
反邪教标语
2014/06/23 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年销售员工作总结
2014/12/01 职场文书
文艺演出主持词
2015/07/01 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
基于Redis位图实现用户签到功能
2021/05/08 Redis