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网页制作特殊效果用随机数
May 22 Javascript
jquery插件之easing使用
Aug 19 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
node.js超时timeout详解
Nov 26 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 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实现图片转换成ASCII码的方法
2015/04/03 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
AngularJS入门之动画
2016/07/27 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
浅析Python中的for 循环
2016/06/09 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python将string转换到float的实例方法
2019/07/29 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
行政专员岗位职责范本
2014/08/26 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Go gorilla/sessions库安装使用
2022/08/14 Golang