-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (87 loc) · 4.4 KB
/
index.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
<script src="checkboxgroup.jquery.js"></script>
<style>
.tag {
background: rgba(0, 255, 0, 0.05);
padding: 3px;
display: inline-block;
border: 1px solid rgba(0, 51, 0, 0.3);
}
.multiselect .group > div {
padding: 5px 7px;
}
.multiselect input {
margin: 0.2em 0.5em 0.2em 0.2em;
}
.multiselect label {
background: rgba(0, 0, 0, 0.1);
}
.group {
margin: 0 0 1em 2em;
border: 1px solid #ccc;
}
.highlight {
background: #cfc;
}
</style>
<script>
$(function() {
$('.multiselect').checkboxgroup();
// example of click handler: highlight selected rows
$('.multiselect input').click(function() {
$(this).closest('div')[this.checked ? 'addClass' : 'removeClass']('highlight');
});
// checkbox may be checked after page refresh, add corresponding class
$('.multiselect input').each(function() {
if (this.checked) {
$(this).closest('div').addClass('highlight');
}
});
});
</script>
</head>
<body>
<h1><span class="tag"><label><span class="tag"><input></span> ...</label></span></h1>
<div class="multiselect">
<div class="group">
<div><label><input type="checkbox">Lorem <b>ipsum</b> dolor sit amet,</label></div>
<div><label><input type="checkbox">consectetuer adipiscing elit,</label></div>
<div><label><input type="checkbox">sed diam nonummy nibh euismod tincidunt ut laoreet</label></div>
<div><label><input type="checkbox">dolore magna aliquam erat volutpat.</label></div>
<div><label><input type="checkbox">Ut wisi enim ad minim veniam,</label></div>
<div><label><input type="checkbox">quis nostrud exerci tation ullamcorper suscipit</label></div>
</div>
<div class="group">
<div><label><input type="checkbox">lobortis nisl ut aliquip ex ea commodo consequat.</label></div>
<div><label><input type="checkbox">Duis autem vel eum iriure dolor in hendrerit</label></div>
<div><label><input type="checkbox">in vulputate velit esse molestie consequat,</label></div>
<div><label><input type="checkbox">vel illum dolore eu feugiat nulla facilisis at vero</label></div>
<div><label><input type="checkbox">eros et accumsan et iusto odio dignissim qui blandit</label></div>
<div><label><input type="checkbox">praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</label></div>
</div>
</div>
<h1><span class="tag"><input></span> <span class="tag"><label>...</label></span></h1>
<div class="multiselect">
<div class="group">
<div><input id="v1_01" type="checkbox"> ... <label for="v1_01">Lorem <b>ipsum</b> dolor sit amet,</label></div>
<div><input id="v1_02" type="checkbox"> ... <label for="v1_02">consectetuer adipiscing elit,</label></div>
<div><input id="v1_03" type="checkbox"> ... <label for="v1_03">sed diam nonummy nibh euismod tincidunt ut laoreet</label></div>
<div><input id="v1_04" type="checkbox"> ... <label for="v1_04">dolore magna aliquam erat volutpat.</label></div>
<div><input id="v1_05" type="checkbox"> ... <label for="v1_05">Ut wisi enim ad minim veniam,</label></div>
<div><input id="v1_06" type="checkbox"> ... <label for="v1_06">quis nostrud exerci tation ullamcorper suscipit</label></div>
</div>
<div class="group">
<div><input id="v1_07" type="checkbox"> ... <label for="v1_07">lobortis nisl ut aliquip ex ea commodo consequat.</label></div>
<div><input id="v1_08" type="checkbox"> ... <label for="v1_08">Duis autem vel eum iriure dolor in hendrerit</label></div>
<div><input id="v1_09" type="checkbox"> ... <label for="v1_09">in vulputate velit esse molestie consequat,</label></div>
<div><input id="v1_10" type="checkbox"> ... <label for="v1_10">vel illum dolore eu feugiat nulla facilisis at vero</label></div>
<div><input id="v1_11" type="checkbox"> ... <label for="v1_11">eros et accumsan et iusto odio dignissim qui blandit</label></div>
<div><input id="v1_12" type="checkbox"> ... <label for="v1_12">praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</label></div>
</div>
</div>
</body>
</html>