之前一直看到有人在问，单选按钮和多选按钮怎么加样式、怎么把按钮变大？下面把我做的一个例子分享出来。
1.首先把按钮做成图片
2.html页面
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(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");
});
});
</script>
</head>
<style>
/* 多选/单选 */
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;
}
</style>
<body>
<label for="checkbox-01">
<input type="checkbox" checked="checked" value="1" id="checkbox-01" name="sample-checkbox-01" />
Checkbox1 </label>
<label for="checkbox-02">
<input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" />
Checkbox2</label>
<label for="radio-01">
<input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" />
Radio1 </label>
<label for="radio-02">
<input type="radio" value="1" id="radio-02" name="sample-radio" />
Radio2 </label>
<label for="radio-03">
<input type="radio" value="1" id="radio-03" name="sample-radio" />
Radio3 </label>
</body>
</html>
- 2022元宵节的传说故事
- 正月十五吃元宵的传统原因是什么
- 正月十五元宵闹社火的来历故事是什么
- 元宵节赏花灯的活动寓意是什么
- 元宵节吃汤圆的来历
- 元宵节踩高跷的习俗介绍
- 关于元宵节闹花灯的由来
- 元宵节的起源由来
- 元宵节吃饺子的来历是什么
- 关于元宵节的习俗大全
- 为什么说元宵节是中国情人节
- 元宵节的节日小知识
- 元宵节放烟花有何寓意
- 元宵节猜灯谜有什么吉祥的寓意
- 元宵节吃汤圆的由来
- 元宵节的传说故事
- 元宵节灯谜大全及答案最新150条
- 元宵节吃汤圆的由来用英语_元宵节灯谜的由来
- 元宵节来历的传说有哪些
- 古代人元宵节当天有哪些活动
- 元宵节有哪些古老的风俗习惯活动
- 元宵节挂灯笼有哪些含义
- 传统节日元宵节的由来故事
- 2022最新元宵猜灯谜及答案模板
- 盘点元宵节猜灯谜有什么规则
- intervention effort
- interventionism
- interventionist
- interventionist policy
- intervention price
- intervention-price
- intervention programme
- intervention programme
- intervention rate
- intervention-rate
- 移译
- 移调
- 移转
- 移送
- 移防
- 移项
- 移风易俗
- 秽
- 秽乱
- 秽史
- 中国矿业大学力建学院2015年全国硕士研究生招生考试进入复试考生名单公布
- 佛山职业技术学院转发广东省2015年高职院校自主招生工作流程
- 中国矿业大学力建学院2015年硕士研究生复试工作安排
- 佛山职业技术学院2015年自主招生报考条件
- 佛山职业技术学院转发做好2015年广东省普通高考考生补报名工作通知
- 中国矿业大学力建学院2015年硕士研究生分专业招生计划
- 长安大学电控学院2015年硕士研究生招生复试通知
- 中国矿业大学矿业工程学院2015年硕士复试安排及复试名单
- 广东农工商职业技术学院2015年自主招生各专业报考人数统计表
- 广东农工商职业技术学院2015年自主招生简章