回答編集履歴
1
調整
test
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
1
|
「複数のカテゴリを持たせ」とのことですがdata-categoryを設定するとした場合値は文字列しか指定できません
|
|
2
2
|
複数のカテゴリをもたせる方法としては少し工夫が必要です、できればクラスなどの複数指定できるものにするほうがやりやすいでしょう。
|
|
3
3
|
|
|
4
|
+
# 参考
|
|
5
|
+
CSSでやるとこんな感じ？
|
|
6
|
+
```html
|
|
7
|
+
<style>
|
|
8
|
+
.works_list_item{display:none;}
|
|
9
|
+
fieldset:has([value="category-a"]:checked) ~ ul .category-a,
|
|
10
|
+
fieldset:has([value="category-b"]:checked) ~ ul .category-b,
|
|
11
|
+
fieldset:has([value="category-c"]:checked) ~ ul .category-c
|
|
12
|
+
{display:list-item;}
|
|
13
|
+
</style>
|
|
14
|
+
<fieldset class="works_form_detail">
|
|
15
|
+
<legend>選択</legend>
|
|
16
|
+
<label><input type="checkbox" value="category-a">a</label>
|
|
17
|
+
<label><input type="checkbox" value="category-b">b</label>
|
|
18
|
+
<label><input type="checkbox" value="category-c">c</label>
|
|
19
|
+
</fieldset>
|
|
20
|
+
<hr>
|
|
21
|
+
<ul>
|
|
22
|
+
<li class="works_list_item category-a">a</li>
|
|
23
|
+
<li class="works_list_item category-b">b</li>
|
|
24
|
+
<li class="works_list_item category-c">c</li>
|
|
25
|
+
<li class="works_list_item category-a category-c">a c</li>
|
|
26
|
+
<li class="works_list_item category-b category-c">b c</li>
|
|
27
|
+
<li class="works_list_item category-a category-b category-c">a b c</li>
|
|
28
|
+
</ul>
|
|
29
|
+
```
|