質問編集履歴
3
htmlとjavascriptを改めました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -24,7 +24,7 @@
|
|
24
24
|
|
25
25
|
<ul id="attribute">
|
26
26
|
|
27
|
-
<li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
|
27
|
+
<li><label class="selected"><input type="checkbox" id="all_attribute" class="sort" checked="checked">すべて</label></li>
|
28
28
|
|
29
29
|
<li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li>
|
30
30
|
|
@@ -42,7 +42,7 @@
|
|
42
42
|
|
43
43
|
<ul id="type">
|
44
44
|
|
45
|
-
<li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li>
|
45
|
+
<li><label class="selected"><input type="checkbox" id="all_type" class="sort" checked="checked">すべて</label></li>
|
46
46
|
|
47
47
|
<li><label><input type="checkbox" id="type01" class="sort">type01</label></li>
|
48
48
|
|
@@ -98,75 +98,145 @@
|
|
98
98
|
|
99
99
|
$( function() {
|
100
100
|
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
101
|
+
$( '#search li label input:not(#all_attribute)' ).click( function() {
|
102
|
+
|
103
|
+
var inputkey = [ 'attribute', 'type' ]
|
104
|
+
|
105
|
+
, i, l = inputkey.length
|
106
|
+
|
107
|
+
, $res, $tmp, res = []
|
108
|
+
|
109
|
+
, $all = $( '#all_attribute' );
|
110
|
+
|
111
|
+
;
|
112
|
+
|
113
|
+
$tmp = $( '#list > li' ).removeClass( 'active' );
|
114
|
+
|
115
|
+
for ( i = 0; i < l; i++ ) {
|
116
|
+
|
117
|
+
res = []
|
118
|
+
|
119
|
+
$( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
|
120
|
+
|
121
|
+
res.push( $( this )[ 0 ].id );
|
122
|
+
|
123
|
+
} );
|
124
|
+
|
125
|
+
if ( !res.length ) { continue; }
|
126
|
+
|
127
|
+
$tmp = $( '#list > li.' + res.join( ', #list > li.' ) );
|
128
|
+
|
129
|
+
if ( !$res || !$res.length ) {
|
130
|
+
|
131
|
+
$res = $tmp;
|
132
|
+
|
133
|
+
} else if ( $tmp.length ) {
|
134
|
+
|
135
|
+
$res = $res.filter( '.' + res.join( ', .' ) );
|
136
|
+
|
137
|
+
}
|
138
|
+
|
139
|
+
}
|
140
|
+
|
141
|
+
if ( $res && $res.length ) {
|
142
|
+
|
143
|
+
$res.addClass( 'active' );
|
144
|
+
|
145
|
+
$all.prop( 'checked', false );
|
146
|
+
|
147
|
+
} else {
|
148
|
+
|
149
|
+
// No Selected
|
150
|
+
|
151
|
+
res = false;
|
152
|
+
|
153
|
+
$all.prop( 'checked', true );
|
154
|
+
|
155
|
+
}
|
156
|
+
|
157
|
+
} );
|
158
|
+
|
159
|
+
$( '#all_attribute' ).click( function() {
|
160
|
+
|
161
|
+
if ( $( this ).prop( 'checked') === true ) {
|
162
|
+
|
163
|
+
$( '#list > li' ).removeClass( 'active' );
|
164
|
+
|
165
|
+
$( '#search input:checked:not(#all_attribute)' ).prop( 'checked', false );
|
166
|
+
|
167
|
+
}
|
168
|
+
|
169
|
+
} );
|
170
|
+
|
171
|
+
$( '#search li label input:not(#all_type)' ).click( function() {
|
172
|
+
|
173
|
+
var inputkey = [ 'attribute', 'type' ]
|
174
|
+
|
175
|
+
, i, l = inputkey.length
|
176
|
+
|
177
|
+
, $res, $tmp, res = []
|
178
|
+
|
179
|
+
, $all = $( '#all_attribute' );
|
180
|
+
|
181
|
+
;
|
182
|
+
|
183
|
+
$tmp = $( '#list > li' ).removeClass( 'active' );
|
184
|
+
|
185
|
+
for ( i = 0; i < l; i++ ) {
|
186
|
+
|
187
|
+
res = []
|
188
|
+
|
189
|
+
$( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() {
|
190
|
+
|
191
|
+
res.push( $( this )[ 0 ].id );
|
192
|
+
|
193
|
+
} );
|
194
|
+
|
195
|
+
if ( !res.length ) { continue; }
|
196
|
+
|
197
|
+
$tmp = $( '#list > li.' + res.join( ', #list > li.' ) );
|
198
|
+
|
199
|
+
if ( !$res || !$res.length ) {
|
200
|
+
|
201
|
+
$res = $tmp;
|
202
|
+
|
203
|
+
} else if ( $tmp.length ) {
|
204
|
+
|
205
|
+
$res = $res.filter( '.' + res.join( ', .' ) );
|
206
|
+
|
207
|
+
}
|
208
|
+
|
209
|
+
}
|
210
|
+
|
211
|
+
if ( $res && $res.length ) {
|
212
|
+
|
213
|
+
$res.addClass( 'active' );
|
214
|
+
|
215
|
+
$all.prop( 'checked', false );
|
216
|
+
|
217
|
+
} else {
|
218
|
+
|
219
|
+
// No Selected
|
220
|
+
|
221
|
+
res = false;
|
222
|
+
|
223
|
+
$all.prop( 'checked', true );
|
224
|
+
|
225
|
+
}
|
226
|
+
|
227
|
+
} );
|
228
|
+
|
229
|
+
$( '#all_type' ).click( function() {
|
230
|
+
|
231
|
+
if ( $( this ).prop( 'checked') === true ) {
|
232
|
+
|
233
|
+
$( '#list > li' ).removeClass( 'active' );
|
234
|
+
|
235
|
+
$( '#search input:checked:not(#all_type)' ).prop( 'checked', false );
|
236
|
+
|
237
|
+
}
|
238
|
+
|
239
|
+
} );
|
170
240
|
|
171
241
|
} );
|
172
242
|
|
2
jsfiddleで試したことを追記しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -195,3 +195,21 @@
|
|
195
195
|
}
|
196
196
|
|
197
197
|
```
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
|
202
|
+
|
203
|
+
|
204
|
+
|
205
|
+
以下、追記いたします。
|
206
|
+
|
207
|
+
|
208
|
+
|
209
|
+
[https://jsfiddle.net/mekadoq/m5z9hezb/2/](https://jsfiddle.net/mekadoq/m5z9hezb/2/)
|
210
|
+
|
211
|
+
|
212
|
+
|
213
|
+
上記URLのように、2つある「すべて」のidをそれぞれ「all_attribute」「all_type」として、javascriptもそれぞれに対応させようとしたところ、各選択肢にチェックをいれた際に「すべて」のチェックが外れません。
|
214
|
+
|
215
|
+
また、「.addClass( 'active' );」「.removeClass( 'active' );」が実行されなくなってしまいました。
|
1
jsfiddleリンクを追加
test
CHANGED
File without changes
|
test
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
「attribute」「type」のどちらにもそれぞれに対応する「すべて」をつけた場合、jqueryがうまくできませんでした。
|
4
4
|
|
5
|
-
https://jsfiddle.net/jwqyan5j/2/
|
5
|
+
[https://jsfiddle.net/jwqyan5j/2/](https://jsfiddle.net/jwqyan5j/2/)
|
6
6
|
|
7
7
|
|
8
8
|
|