teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問子要素にチェックが入っている親要素　以外をJQUERYで非表示にしたいです…

編集履歴

質問編集履歴

4

JQUERYでお願いします

2021/04/02 04:05

投稿

Neoko
Neoko

スコア4

test CHANGED
@@ -1 +1 @@
1
- 子要素にチェックが入っている親要素　以外を非表示にしたいです…
1
+ 子要素にチェックが入っている親要素　以外をJQUERYで非表示にしたいです…
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  子要素に<input type="checkbox" checked="checked">のchecked
16
16
 
17
- がある時、チェックされてないグループを非表示にしたいです
17
+ がある時、チェックされてない<label class="service--1">グループを非表示にしたいです
18
18
 
19
19
 
20
20
 

3

さらに簡略化しました。よろしくお願いします。

2021/04/02 04:05

投稿

Neoko
Neoko

スコア4

test CHANGED
File without changes
test CHANGED
@@ -26,133 +26,37 @@
26
26
 
27
27
  ```html
28
28
 
29
- <label for="services_1" class="row service--1">
30
-
31
-
32
-
33
- <div class="col-xs-12">
29
+ <label class="service--1">
34
-
35
- <div class="row">
36
-
37
- <div class="col-xs-2 checkbox">
38
30
 
39
31
  <div class="checkbox">
40
32
 
41
- <input type="checkbox" name="one" id="services_1" value="1" data-price="10000" data-duration="90">
33
+ <input type="checkbox" name="one" id="services_1">
42
34
 
35
+ <h1>名前１</h1>
36
+
43
- <label for="services_1"></label>
37
+ <img　src="/1.png">
44
38
 
45
39
  </div>
46
-
47
- </div>
48
-
49
- <div class="col-xs-10">
50
-
51
- <h3>名前１</h3>
52
-
53
- </div>
54
-
55
- <h3 class="col-xs-10">
56
-
57
- ¥10000
58
-
59
- </h3>
60
-
61
- <div class="col-xs-10">
62
-
63
- <img　src="/2.png"></div>
64
-
65
- </div>
66
-
67
- </div>
68
-
69
-
70
-
71
- <div class="col-xs-12">
72
-
73
- <div class="row">
74
-
75
- <div class="col-xs-12">
76
-
77
- <p></p>
78
-
79
- <span class="steps-duration"><small>時間:</small> 01:30</span>
80
-
81
- </div>
82
-
83
- </div>
84
-
85
- </div>
86
-
87
-
88
40
 
89
41
  </label>
90
42
 
91
43
 
92
44
 
93
-
94
-
95
-
96
-
97
- <label for="services_2" class="row service--2">
98
-
99
-
100
-
101
- <div class="col-xs-12">
45
+ <label class="service--2">
102
-
103
- <div class="row">
104
-
105
- <div class="col-xs-2 checkbox">
106
46
 
107
47
  <div class="checkbox">
108
48
 
109
- <input type="checkbox" name="two" id="services_2" value="1" checked="checked" data-price="10000" data-duration="90">
49
+ <input type="checkbox" name="two" id="services_2" checked="checked">
110
50
 
51
+ <h1>名前２</h1>
52
+
111
- <label for="services_2"></label>
53
+ <img　src="/2.png">
112
54
 
113
55
  </div>
114
56
 
115
- </div>
57
+ </label>
116
-
117
- <div class="col-xs-10">
118
-
119
- <h3>名前２</h3>
120
-
121
- </div>
122
-
123
- <h3 class="col-xs-10">
124
-
125
- ¥10000
126
-
127
- </h3>
128
-
129
- <div class="col-xs-10">
130
-
131
- <img src="/2.jpg"></div>
132
-
133
- </div>
134
-
135
- </div>
136
58
 
137
59
 
138
-
139
- <div class="col-xs-12">
140
-
141
- <div class="row">
142
-
143
- <div class="col-xs-12">
144
-
145
- <span class="steps-duration"><small>時間:</small> 01:30</span>
146
-
147
- </div>
148
-
149
- </div>
150
-
151
- </div>
152
-
153
-
154
-
155
- </label>
156
60
 
157
61
  ```
158
62
 

2

jquery 試したこと追加しました

2021/04/02 04:04

投稿

Neoko
Neoko

スコア4

test CHANGED
File without changes
test CHANGED
@@ -176,6 +176,12 @@
176
176
 
177
177
  ```
178
178
 
179
+ ```jQuery
180
+
181
+ $("label:not(:has[attr='checked']))").hide();
182
+
183
+ ```
184
+
179
185
 
180
186
 
181
187
  よろしくお願いします…

1

不要クラス省略しました

2021/04/02 01:47

投稿

Neoko
Neoko

スコア4

test CHANGED
File without changes
test CHANGED
@@ -26,19 +26,19 @@
26
26
 
27
27
  ```html
28
28
 
29
- <label for="services_1" class="row service service--1">
29
+ <label for="services_1" class="row service--1">
30
30
 
31
31
 
32
32
 
33
- <div class="col-xs-12 service__header">
33
+ <div class="col-xs-12">
34
34
 
35
- <div class="row steps-info service-info">
35
+ <div class="row">
36
36
 
37
- <div class="col-xs-2 col-xs-push-10 checkbox steps-check service-check">
37
+ <div class="col-xs-2 checkbox">
38
38
 
39
39
  <div class="checkbox">
40
40
 
41
- <input type="checkbox" name="sln[services][1]" id="services_1" value="1" data-price="10000" data-duration="90">
41
+ <input type="checkbox" name="one" id="services_1" value="1" data-price="10000" data-duration="90">
42
42
 
43
43
  <label for="services_1"></label>
44
44
 
@@ -46,21 +46,21 @@
46
46
 
47
47
  </div>
48
48
 
49
- <div class="col-xs-10 col-xs-pull-2">
49
+ <div class="col-xs-10">
50
50
 
51
- <h3 class="steps-name service-name">名前１</h3>
51
+ <h3>名前１</h3>
52
52
 
53
53
  </div>
54
54
 
55
- <h3 class="col-xs-10 steps-price service-price">
55
+ <h3 class="col-xs-10">
56
56
 
57
57
  ¥10000
58
58
 
59
59
  </h3>
60
60
 
61
- <div class="col-xs-10 col-sm-push-0 steps-thumb service-thumb">
61
+ <div class="col-xs-10">
62
62
 
63
- <img width="640" height="640" src="/2.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt=""></div>
63
+ <img　src="/2.png"></div>
64
64
 
65
65
  </div>
66
66
 
@@ -70,13 +70,13 @@
70
70
 
71
71
  <div class="col-xs-12">
72
72
 
73
- <div class="row steps-description service-description">
73
+ <div class="row">
74
74
 
75
75
  <div class="col-xs-12">
76
76
 
77
77
  <p></p>
78
78
 
79
- <span class="steps-duration service-duration"><small>時間:</small> 01:30</span>
79
+ <span class="steps-duration"><small>時間:</small> 01:30</span>
80
80
 
81
81
  </div>
82
82
 
@@ -94,19 +94,19 @@
94
94
 
95
95
 
96
96
 
97
- <label for="services_19680" class="row service service--2">
97
+ <label for="services_2" class="row service--2">
98
98
 
99
99
 
100
100
 
101
- <div class="col-xs-12 service__header">
101
+ <div class="col-xs-12">
102
102
 
103
- <div class="row steps-info service-info">
103
+ <div class="row">
104
104
 
105
- <div class="col-xs-2 col-xs-push-10 checkbox steps-check service-check">
105
+ <div class="col-xs-2 checkbox">
106
106
 
107
107
  <div class="checkbox">
108
108
 
109
- <input type="checkbox" name="sln[services][2]" id="services_2" value="1" checked="checked" data-price="10000" data-duration="90">
109
+ <input type="checkbox" name="two" id="services_2" value="1" checked="checked" data-price="10000" data-duration="90">
110
110
 
111
111
  <label for="services_2"></label>
112
112
 
@@ -114,21 +114,21 @@
114
114
 
115
115
  </div>
116
116
 
117
- <div class="col-xs-10 col-xs-pull-2">
117
+ <div class="col-xs-10">
118
118
 
119
- <h3 class="steps-name service-name">名前２</h3>
119
+ <h3>名前２</h3>
120
120
 
121
121
  </div>
122
122
 
123
- <h3 class="col-xs-10 steps-price service-price">
123
+ <h3 class="col-xs-10">
124
124
 
125
125
  ¥10000
126
126
 
127
127
  </h3>
128
128
 
129
- <div class="col-xs-10col-sm-push-0 steps-thumb service-thumb">
129
+ <div class="col-xs-10">
130
130
 
131
- <img width="640" height="640" src="/2.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt=""></div>
131
+ <img src="/2.jpg"></div>
132
132
 
133
133
  </div>
134
134
 
@@ -138,11 +138,11 @@
138
138
 
139
139
  <div class="col-xs-12">
140
140
 
141
- <div class="row steps-description service-description">
141
+ <div class="row">
142
142
 
143
143
  <div class="col-xs-12">
144
144
 
145
- <span class="steps-duration service-duration"><small>時間:</small> 01:30</span>
145
+ <span class="steps-duration"><small>時間:</small> 01:30</span>
146
146
 
147
147
  </div>
148
148