用jquery与css打造个性化的单选框和复选框


上图是经过css和jquery美化后的效果，怎么样呢？是不是很爽啊！这个是我从另一个脚本库看到的一个效果，觉得挺不错的，然后就用jquery自己实现了一个。供大家鉴赏！
话不多说，直接上代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>打造个性化的单选框和复选框</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-size: 12px;
}
.formt
{
width: 400px;
margin: 10px auto;
border: 1px solid #ccc;
height: 200px;
padding: 10px;
}
.unselected
{
background-image: url(rdo_off.png);
}
.selected
{
background-image: url(rdo_on.png);
}
.unchecked
{
background-image: url(chk_off.png);
}
.checked
{
background-image: url(chk_on.png);
}
.f_checkbox, .f_radio
{
background-position: 3px center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 16px;
line-height: 120%;
padding: 4px 24px;
}
.formt input
{
left: -9999px;
position: absolute;
}
.addcolor
{
color: Red;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<script type="text/javascript">
$(
function () {
//单选
$(".f_radio").click(
function () {
$(this).addClass("selected").removeClass("unselected").siblings(".selected").removeClass("selected").addClass("unselected");
}
);
//复选
$(".f_checkbox").toggle(
function () {
$(this).addClass("checked");
$(this).children("input").attr("checked", "checked");
},
function () {
$(this).removeClass("checked");
$(this).children("input").removeAttr("checked");
}
);
}
);
</script>
</head>
<body>
<div class="formt">
<label class="f_radio unselected">
<input type='radio' name="height" value="dwarf" />
网上办税标准版</label>
<label class="f_radio unselected">
<input type="radio" name="height" value="average" />
网上报税专业版</label>
<label class="f_radio unselected">
<input type="radio" name="height" value="giant" />
其他</label>
<hr />
<label class="f_checkbox unchecked">
<input type="checkbox" name="newsletter" value="c" id="c" />
发票认证</label>
<label class="f_checkbox unchecked">
<input type="checkbox" name="newsletter" value="d" id="d" />
涉税认证</label>
</div>
<label for="male">
Male</label>
<input type="checkbox" name="sex" id="male" />
</body>
</html>

图片大家可以自己截图。

赞 (0)

相关推荐

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

  • JQuery判断radio（单选框）是否选中和获取选中值方法总结

    一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • Jquery为单选框checkbox绑定单击click事件

    一.假设有如下一段html代码 复制代码 代码如下: <dd id="1"> <input id="checkbox-518" class="imagezz" name type="checkbox" value="518"> </dd> 选中事件(根据选中情况修改上一层背景): 复制代码 代码如下: var $test_image_check_box_click = f

  • 推荐11款jQuery开发的复选框和单选框美化插件

    推荐11款jQuery开发的复选框和单选框美化插件

    作者:Chris Spooner翻译:Terry li - GBin1.com英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的浏览器及其操作系统对于样式的渲染展现是不一样的.但是在jQuery的帮 助下我们可以整体的改变他们的样式.这里我们将介绍12款实用的美化插件来帮助大家设计简单直白的按钮设计,或者时尚的Iphone类型的开关按钮. Fancy check

  • jquery 操作单选框，复选框，下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码 代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

  • 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操作下拉列表、文本框、复选框、单选框集合(收藏)

    各种对下拉列表.文本框.复选框.单选框的jquery的相关操作.做为记录和收藏的最好方法. 遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each

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

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

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

  • JQUERY对单选框(radio)操作的小例子

    复制代码 代码如下: <asp:RadioButtonList runat="server" ID="rblShow" class="show" RepeatDirection="Horizontal"> <asp:ListItem Text="是" value="1" /> <asp:ListItem Text="否" value=&q

  • 用jquery与css打造个性化的单选框和复选框

    用jquery与css打造个性化的单选框和复选框

    上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js和jquery分别验证单选框、复选框、下拉框

    本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen

  • js获取单选框或复选框值及操作

    复制代码 代码如下: <script> function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; for (i=0;i<objarray;i++) {//欢迎来到我们,我们的网址是www.jb51.net,很好记,我们,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. if(st

  • js实现iPhone界面风格的单选框和复选框按钮实例

    js实现iPhone界面风格的单选框和复选框按钮实例

    本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮.分享给大家供大家参考.具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "

  • javascript判断单选框或复选框是否选中方法集锦

    提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name

  • vue.js实现单选框、复选框和下拉框示例

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

  • 使用AngularJS处理单选框和复选框的简单方法

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • 在js中单选框和复选框获取值的方式

    复制代码 代码如下: // JavaScript Document function sub1() {      // 用Form名称直接引用form对象 //form1.method = "get"; // 将form名称作为document对象的属性来引用form对象, // 并用user作为form对象的属性来引用名为user的文本框元素对象 // document.form1.user.value = "lisi";              var s1=

随机推荐