回答編集履歴
1
画像の追加
test
CHANGED
|
@@ -12,9 +12,13 @@
|
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
|
|
16
|
+
|
|
15
17
|
これでまずname="hair_type"というジャンルで囲われたチェックボックスが完成します。
|
|
16
18
|
|
|
17
|
-
ただ、デフォルトのままでは
|
|
19
|
+
ただ、デフォルトのままではチェックボックスしか押せないですし、あまり格好がつきません。
|
|
20
|
+
|
|
21
|
+
|
|
18
22
|
|
|
19
23
|
```HTML
|
|
20
24
|
|
|
@@ -34,7 +38,13 @@
|
|
|
34
38
|
|
|
35
39
|
```
|
|
36
40
|
|
|
41
|
+
|
|
42
|
+
|
|
37
|
-
checkboxのid属性とlabelのfor属性に同じ名前をつけてやればそれぞれが紐付いてくれ
|
|
43
|
+
checkboxのid属性とlabelのfor属性に同じ名前をつけてやればそれぞれが紐付いてくれます。
|
|
44
|
+
|
|
45
|
+
これでlabelに囲われた領域をクリックしてもチェックがついたり外れたりするようになります。
|
|
46
|
+
|
|
47
|
+
|
|
38
48
|
|
|
39
49
|
あとはCSSやJavaScriptなどでチェックされたものにハイライトをつけたりしてやればOKです。
|
|
40
50
|
|
|
@@ -60,7 +70,11 @@
|
|
|
60
70
|
|
|
61
71
|
```
|
|
62
72
|
|
|
73
|
+
|
|
63
74
|
|
|
75
|
+
チェックボックスが消えて、labelの領域のみが表示されました。
|
|
76
|
+
|
|
77
|
+
このままではチェックしても何も変化がありませんので、
|
|
64
78
|
|
|
65
79
|
```JavaScript
|
|
66
80
|
|
|
@@ -81,3 +95,7 @@
|
|
|
81
95
|
</script>
|
|
82
96
|
|
|
83
97
|
```
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
JavaScriptで動きをつけてあげればOKです。
|