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

本文实例讲述了Labelauty–jQuery单选框/复选框美化插件，分享给大家供大家参考。具体如下：
Labelauty–jQuery单选框/复选框美化插件，基于jQuery的一个非常小巧的插件，它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外，还能够设置选中和未选中的文本信息、标签的最小宽度等。
运行效果图：-------------------------------查看效果------------------------------------

具体代码如下

<head>
<title>Labelauty–jQuery单选框/复选框美化插件</title>
<link rel="stylesheet" href="css/jquery-labelauty.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-labelauty.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<h1>jQuery单选框/复选框美化插件演示</h1>
<h3>您的职业（单选框）</h3>
<ul class="">
 <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" disabled data-labelauty="不可用"></li>
</ul>

<hr>

<h3>您擅长的技能（复选框）</h3>
<ul class="">
 <li><input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="CSS"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="SEO"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="PHP"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty="JAVA"></li>
 <li><input type="checkbox" name="checkbox" data-labelauty=".NET"></li>
</ul>
<script>
$(function(){
 $(':input').labelauty();
});
</script>
<!-- 代码 结束 -->

<div style="text-align:center;margin:50px 0">
<p style="margin:20px 0"></p>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 浅谈jquery点击label触发2次的问题

    今天写问卷的时候遇到个label点击的时候,监听的click事件被执行两次:产生这个的原因么...事件冒泡 <div class="questionBox checkBox"> <div class="title"> 2.你如何理解创新意识的重要性?</div> <div class="checkBoxList" data-more="2"> <label> <

  • Jquery跨域获得Json时invalid label错误的解决办法

    最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据.如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求.如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp

  • JS和Jquery获取和修改label的值的示例代码

    获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label

  • jquery实现点击label的同时触发文本框点击事件的方法

    本文实例讲述了jquery实现点击label的同时触发文本框点击事件的方法.分享给大家供大家参考.具体实现方法如下: var labelID; $('label').click(function() { labelID = $(this).attr('for'); $('#'+labelID).trigger('click'); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • 基于Jquery的将DropDownlist的选中值赋给label的实现代码

    jquery代码 复制代码 代码如下: $(function() { $("#DropDownList1").bind("change", function() { $("#Label1").text($("#DropDownList1 option:selected").text()); }); 或者 复制代码 代码如下: $("#DropDownList1").bind("change&quo

  • 自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&quo

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

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

    本文实例讲述了Labelauty–jQuery单选框/复选框美化插件,分享给大家供大家参考.具体如下: Labelauty–jQuery单选框/复选框美化插件,基于jQuery的一个非常小巧的插件,它除了能够实现单选框/复选框原本的选中.未选中.禁用等功能外,还能够设置选中和未选中的文本信息.标签的最小宽度等. 运行效果图:-------------------------------查看效果------------------------------------ 具体代码如下 <head>

  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • jQuery对checkbox 复选框的全选全不选反选的操作

    jQuery对checkbox 复选框的全选全不选反选的操作

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

  • jquery模拟多级复选框效果的简单实例

    今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c

  • jQuery切换所有复选框选中状态的方法

    本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 希望本文所述对大家的jq

  • jQuery实现遍历复选框的方法示例

    jQuery实现遍历复选框的方法示例

    本文实例讲述了jQuery实现遍历复选框的方法.分享给大家供大家参考,具体如下: 1.问题背景: 这里有10个复选框,根据选择的复选框获取其值,并将其值用"--"连接,插入到div中 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历复选框</title> <script type="tex

  • 解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    首先: 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> <script type="text/javascript" src="${ctx}/adminthemes/version3/plugins/

  • Android开发之获取单选与复选框的值操作示例

    Android开发之获取单选与复选框的值操作示例

    本文实例讲述了Android开发之获取单选与复选框的值操作.分享给大家供大家参考,具体如下: 效果图: 布局文件: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout

随机推荐