纯CSS Bootstrap单选框和复选框美化特效 jquery单选框和复选框按钮样式美化插件

icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件,你可以对原生的bootstrap单选框和复选框进行美化,应用不同的主题样式,甚至可以制作扁平风格的单选框和复选框。

安装

可以通过npm或bower来安装在icheck-bootstrap。

bower install icheck-bootstrap
 npm install icheck-bootstrap

使用方法

在页面中引入bootstrap.min.css和icheck-bootstrap.css文件。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/icheck-bootstrap.css">
HTML结构

复选框checkbox的示例代码如下:

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

单选框radio的示例代码如下:

<div class="icheck-primary">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

内联样式:

<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

禁用状态:

在复选框或单选框上添加disabled属性,就可以将它设置为禁用状态。

无label标签:

<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>
颜色主题

Bootstrap主题:

  • .icheck-default
  • .icheck-primary
  • .icheck-success
  • .icheck-info
  • .icheck-warning
  • .icheck-danger

扁平风格主题:

  • .icheck-turquoise
  • .icheck-emerland
  • .icheck-peterriver
  • .icheck-amethyst
  • .icheck-wetasphalt
  • .icheck-greensea
  • .icheck-nephritis
  • .icheck-belizehole
  • .icheck-wisteria
  • .icheck-midnightblue
  • .icheck-sunflower
  • .icheck-carrot
  • .icheck-alizarin
  • .icheck-clouds
  • .icheck-concrete
  • .icheck-orange
  • .icheck-pumpkin
  • .icheck-pomegranate
  • .icheck-silver
  • .icheck-asbestos

icheck-bootstrap纯CSS Bootstrap单选框和复选框美化特效插件的github地址为:https://github.com/bantikyan/icheck-bootstrap

10个HTML5美化版复选框和单选框

1、CSS3漂亮的自定义checkbox复选框 9款迷人样式

在线演示源码下载

2、CSS3自定义发光Radiobox单选框

在线演示源码下载

3、CSS3自定义美化复选框Checkbox组合

在线演示源码下载

4、HTML5/CSS3开关按钮 立体3D按钮

在线演示源码下载

5、CSS3响应式表单 可切换表单主题

在线演示源码下载

6、非常个性化的CSS3自定义checkbox和radiobox

在线演示源码下载

7、CSS3实现自定义Checkbox动画

在线演示源码下载

8、jQuery实现美化版的单选框和复选框

在线演示源码下载

9、CSS3自定义Checkbox特效 5种炫酷效果

今天又要来分享关于美化checkbox的CSS3应用了,这次要分享的自定义checkbox特效一共有5种不同的炫酷效果,其实现也和之前分享的几款HTML5自定义Checkbox和Radiobox 很酷的选中动画、CSS3漂亮的自定义Checkbox复选框 9款迷人样式类似,也是利用定义label样式来实现的。

在线演示源码下载

10、HTML5自定义Checkbox和Radiobox 很酷的选中动画

在线演示源码下载

jQuery单选框和复选框按钮样式美化插件

一款包含多种风格的jQuery单选框和复选框按钮样式美化插件,表单单选、复选按钮美化特效代码。
分类:表单代码>复选框难易:初级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示下载资源:28下载资源下载积分:10积分

js代码

<script type="text/javascript" src="2.3/js/inpitassembly-2.0.js"></script>
<script src="js/highlight.min.js"></script>
		<script>
			$(document).ready(function(){
				
				$("#inpitassembly").inpitassembly({
					selected:"ack",
					ischeck_:true,
					ischeck_class:false,
					max:function(event,max){
						alert("最大"+max)
					},
					min:function(event,min){
						alert("最小"+min)
					}
				});				
				$("#inpitassembly").find("button").click(function(){
					// * ==========================
					// * 向check_result方法传本身
					// * 如果你忘记,inpit/assembly依旧会提醒你
					// * ==========================
					var val = check_result($(this));
					alert(val[0].data);
				});	
				
				$("[type='inpit/assembly']").inpitassembly({
					selected:"ack",
					max:function(event,max){
						alert("最大"+max)
					},
					min:function(event,min){
						alert("最小"+min)
					}					
				});
				$("[type='inpit/assembly']").find("button").click(function(){
					// * ==========================
					// * 向check_result方法传本身
					// * 如果你忘记,inpit/assembly依旧会提醒你
					// * ==========================
					var val = check_result($(this));
					alert(val[0].data);
				});					
				$(".insideonelist").click(function(){
					var val = check_result("inside_onelist");
					alert(val[0].data);
				});			
			})			
			
			// 咩啊 有意见啊
			// 撅起屁股 等待交易

			hljs.initHighlightingOnLoad();
			
			var objadd = $(".add"),
				objadd_inx = 8;
				
				objadd.click(function() {
					objadd.before(
						`
							<div name="d-b" value="A`+objadd_inx+`">
								<h2>A` + objadd_inx + `</h2>
								<p>A` + objadd_inx + `</p>
							</div>						
						`
					);
					++objadd_inx;
				});
		</script>

dowebok

Labelauty – jQuery单选框/复选框美化插件

分类:代码日期:点击(33,653)评论(3)

演 示下 载

下拉框美化插件经常见到,如之前介绍过的DropKickSelect-or-Die,而单选框/复选框美化插件就比较少见到了,今天就来介绍一款—— Labelauty。

Labelauty 基于 jQuery,是一个非常小巧的插件。它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外,还能够设置选中和未选中的文本信息、标签的最小宽度等。

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery-labelauty.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-labelauty.js"></script>

2、HTML

<ul class="dowebok">
    <li><input type="radio" name="radio" data-labelauty="视觉设计师"></li>
    <li><input type="radio" name="radio" data-labelauty="交互设计师"></li>
    <li><input type="radio" name="radio" data-labelauty="前端工程师"></li>
    <li><input type="radio" name="radio" data-labelauty="数据分析师"></li>
    <li><input type="radio" name="radio" data-labelauty="不可用" disabled></li>
</ul>

Labelauty 可以让选中和不选中显示不同的文本,如:

<input type="radio" name="radio" data-labelauty="未选择|已选择">

3、JavaScript

$(function(){
    $(':input').labelauty();
});

配置

属性/方法类型默认值说明
development布尔值false开发模式,将会向控制台输出一些信息
class字符串‘labelauty’触发类
label布尔值true是否使用文本 label,如果为 false,则只显示图标
separator字符串‘|’文本/消息分隔符,用于选中和未选中
checked_label字符串‘Checked’默认选中时的文本
unchecked_label字符串‘Unchecked’默认未选中时的文本
minimum_width布尔值/字符串false文本的最小宽度
same_width布尔值true

演 示下 载

GitHub 地址:https://github.com/tudousi/ck_slide

标签:jQuery插件

免责申明

1、本站为用户提供信息存储空间等服务,用户保证对发布的内容享有著作权或已取得合法授权,不会侵犯任何第三方的合法权益。

2、刊载的文章由平台用户所有权归属原作者,不代表同意原文章作者的观点和立场。