php 多选按钮,HTML_单选按钮、多选按钮用图片实现加样式，之前一直看到有人在问，单选 - phpStudy...

单选按钮、多选按钮用图片实现加样式

之前一直看到有人在问，单选按钮和多选按钮怎么加样式、怎么把按钮变大？下面把我做的一个例子分享出来。

1.首先把按钮做成图片

2.html页面

复制代码代码如下:

$(function(){

$("input[type='checkbox']").click(function(){

if($(this).is(':checked')){

$(this).attr("checked","checked");

$(this).parent().removeClass("c_off").addClass("c_on");

}else{

$(this).removeAttr("checked");

$(this).parent().removeClass("c_on").addClass(" c_off");

}

});

$("input[type='radio']").click(function(){

$("input[type='radio']").removeAttr("checked");

$(this).attr("checked","checked");

$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");

});

});

/* 多选/单选 */

label {

display: block;

cursor: pointer;

line-height: 26px;

margin-bottom: 20px;

width: 26px;

height: 26px;

line-height: 26px;

float: left;

margin-top: 6px;

}

.radios {

padding-top: 18px;

border-top: 1px solid #049CDB;

}

.label_check input, .label_radio input {

margin-right: 5px;

}

.lblby .label_check, .lblby .label_radio {

margin-right: 8px;

}

.lblby .label_radio, .lblby .label_check {

background: url(../images/jxc_btn.png) no-repeat;

}

.lblby .label_check {

background-position: 0 0px

}

.lblby label.c_on {

background-position: 0 -26px;

}

.lblby .label_radio {

background-position: 0 -52px;

}

.lblby label.r_on {

background-position: 0 -78px;

}

.lblby .label_check input, .lblby .label_radio input {

position: absolute;

left: -9999px;

}

Checkbox1

Checkbox2

Radio1

Radio2

Radio3

相关阅读:

.NET中的异常和异常处理用法分析

mysql报错：MySQL server version for the right syntax to use near type=InnoDB的解决方法

js实现动态加载脚本的方法实例汇总

简单介绍SQL Server里的闩锁

Win10预览版14316彩色主题下把标题栏改成白色的方法

浅析Android手机卫士自定义控件的属性

Win8如何打开事件查看器有哪些方法

js关于命名空间的函数实例

Android自定义实现BaseAdapter的普通实现

C#中的委托数据类型简介

C++中的RAII机制详解

超详细的mysql图文安装教程

winxp开机需按F11才能进入系统的解决办法 winxp无法进入系统

基于Jquery和html5实现炫酷的3D焦点图动画