質問編集履歴

3

htmlとjavascriptを改めました。

2017/04/30 12:42

投稿

mekadoq
mekadoq

スコア10

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
- $( '#search li label input:not(#all)' ).click( function() {
102
-
103
- var inputkey = [ 'attribute', 'type', 'option' ]
104
-
105
- , i, l = inputkey.length
106
-
107
- , $res, $tmp, res = []
108
-
109
- , $all = $( '#all' );
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' ).click( function() {
160
-
161
- if ( $( this ).prop( 'checked') === true ) {
162
-
163
- $( '#list > li' ).removeClass( 'active' );
164
-
165
- $( '#search input:checked:not(#all)' ).prop( 'checked', false );
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で試したことを追記しました。

2017/04/30 12:42

投稿

mekadoq
mekadoq

スコア10

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リンクを追加

2017/04/30 12:18

投稿

mekadoq
mekadoq

スコア10

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