BootStrap表单控件之复选框checkbox和单选择按钮radio

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>表单控件——复选框checkbox和单选择按钮radio</title>
 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet"
 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 crossorigin="anonymous">
 <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
 <link rel="stylesheet"
 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow"
 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
 crossorigin="anonymous">
</head>
<body>
 <form role="form">
  <h3>示例</h3>
  <div class="checkbox">
   <label for="">
    <input type="checkbox">记住密码
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios1"
    value="love" checked>喜欢
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios2"
    value="hate">不喜欢
   </label>
  </div>
 </form>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 crossorigin="anonymous"></script>
</body>
</html>

以上所述是小编给大家介绍的BootStrap表单控件之复选框checkbox和单选择按钮radio，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 全面解析Bootstrap表单使用方法（表单控件）

    全面解析Bootstrap表单使用方法（表单控件）

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con

  • Bootstrap中表单控件状态(验证状态)

    Bootstrap中表单控件状态(验证状态)

    在制作表单时,难免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果. 1..has-warning:警告状态(黄色) 2..has-error:错误状态(红色) 3..has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名. <form role="form"> <div class="form-group has-success"> <label c

  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

  • 全面解析Bootstrap表单使用方法（表单控件状态）

    全面解析Bootstrap表单使用方法（表单控件状态）

    一.焦点状态 焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • BootStrap 表单控件之单选按钮水平排列

    BootStrap 表单控件之单选按钮水平排列

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心

  • BootStrap表单控件之复选框checkbox和单选择按钮radio

    BootStrap表单控件之复选框checkbox和单选择按钮radio

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--复选框checkbox和单选择按钮radio</title> <!-- 最新版本

  • Android复选框CheckBox与开关按钮Switch及单选按钮RadioButton使用示例详解

    目录 前言 一.复选框CheckBox 二.开关按钮Switch 三.单选按钮RadioButton 单选组的用法 前言 CompoundButton在XML文件中主要使用下面两个属性. checked:指定按钮的勾选状态,true表示勾选,false则表示未勾选,默认为未勾选. button:指定左侧勾选图标的图形资源,如果不指定就使用系统的默认图标. CompoundButton在java代码中主要使用下列4种方法. setChecked:设置按钮的勾选状态. setButtonDrawab

  • jquery获取复选框checkbox的值的简单实现方法

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

  • jquery操作复选框checkbox的方法汇总

    本文实例汇总了jquery操作复选框checkbox的方法.分享给大家供大家参考.具体分析如下: jquery判断checked的三种方法: 复制代码 代码如下: $("input").attr("checked");   //版本1.6+返回:"checked"或"undefined" ,1.5-返回:true或false  $("input").prop("checked");  /

  • JQuery限制复选框checkbox可选中个数的方法

    本文实例讲述了JQuery限制复选框checkbox可选中个数的方法.分享给大家供大家参考.具体分析如下: 由于项目需要限制可批量操作的文件个数 所以写了一段小代码 如果选中个数大于允许的最大个数 其他复选框不能选择 如果小于则所有复选框都能选择 <script type="text/javascript"> $(document).ready(function() { $('input[type=checkbox]').click(function() { $("

  • jQuery操作复选框(CheckBox)的取值赋值实现代码

    1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项: $('input:checkbox').each(function() { if ($(this).attr('c

  • 动态获取复选框checkbox选中个数的jquery代码

    动态获取复选框checkbox选中个数的jquery代码

    今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check

  • jquery对复选框(checkbox)的操作汇总

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项 $('input:checkbox').each(funct

  • jquery获取复选框checkbox的值实现方法

    jQuery API : each(callback)::以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    如下所示: ng-true-value="1" //代表选中的时候,值为1 ng-false-value="0" //代表未选中的时候,值为0 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script

随机推荐