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实现Java中StringBuffer的方法
Feb 09 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Python入门篇之字典
2014/10/17 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
小小聊天室Python代码实现
2016/08/17 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
网吧温馨提示
2015/07/17 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
pandas中对文本类型数据的处理小结
2021/11/01 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL