-
Notifications
You must be signed in to change notification settings - Fork 0
/
check&radio.html
53 lines (51 loc) · 1.64 KB
/
check&radio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*加载自定义单选框&复选框样式*/
input[type="checkbox"],
input[type="radio"]{
width: 0;
height: 0;
}
.label-init{
display: inline-block;
padding-left: 25px;
height: 21px;
line-height: 21px;
cursor: pointer;
}
.checkbox-label{
background: url(img/checkbox.png) 0 0 no-repeat;
}
.checkbox-active{
background-position: left 99%;
}
.radio-label{
background: url(img/radio.png) 0 1px no-repeat;
}
.radio-active{
background-position: left 99%;
}
</style>
</head>
<body>
<form action="" id="form">
爱好:<label for="movie" class="checkbox-label">看电影</label><input type="checkbox" id="movie" name="habit" value="1" checked>
<label for="basckball" class="checkbox-label">打篮球</label><input type="checkbox" id="basckball" name="habit" value="2">
<label for="sleep" class="checkbox-label">睡觉</label><input type="checkbox" id="sleep" name="habit" value="3"><br/>
性别:<label for="man" class="radio-label">男</label><input type="radio" id="man" name="sex" value="1">
<label for="woman" class="radio-label">女</label><input type="radio" id="woman" name="sex" value="0">
</form>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/checkbox.js"></script>
<script type="text/javascript">
$(function(){
$('#form').jcCheckbox();
$('#form').jcRadio();
})
</script>
</body>
</html>