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 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
js获取内联样式的方法
Jan 27 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
微信小程序实现留言板
Oct 31 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
node中使用shell脚本的方法步骤
Mar 23 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制作静态网站的模板框架(四)
2006/10/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Javascript的闭包详解
2014/12/26 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python简单I/O操作示例
2019/03/18 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Django 路由层URLconf的实现
2019/12/30 Python
python实现飞行棋游戏
2020/02/05 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
入党转预备思想汇报
2014/01/07 职场文书
优秀护士演讲稿
2014/04/30 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
乱世佳人观后感
2015/06/08 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android