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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
动态加载jQuery的方法
Jun 16 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
动态表格Table类的实现
2009/08/26 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
js实现双色球效果
2020/08/02 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python 获取等间隔的数组实例
2019/07/04 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Python调用飞书发送消息的示例
2020/11/10 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
运动会获奖感言
2014/02/11 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2014年人事部工作总结
2014/12/03 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers