teratail
回答率
85.48%
質問するログイン新規登録
トップHTML5に関する質問data-属性に複数のimputを設定し、それを取得してリストを絞り込む方法 [HTML] [JavaScript]

編集履歴

質問編集履歴

4

htmlの修正

2022/03/11 09:23

投稿

maniandmani
maniandmani

スコア1

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
  <hr>
55
55
  <ul>
56
56
  <li><label><input type="checkbox" name="graduate" value="goSame">院進(同大学)</label></li>
57
- <li><label><input type="checkbox" name="graduate" value="goDiffe">院進(違大学)</label></li>
57
+ <li><label><input type="checkbox" name="graduate" value="goDiffe">院進(他大学)</label></li>
58
58
  <li><label><input type="checkbox" name="graduate" value="work">就職</label></li>
59
59
  <li><label><input type="checkbox" name="graduate" value="establish">起業</label></li>
60
60
  <hr>
@@ -62,98 +62,50 @@
62
62
  <li class="list_item"
63
63
  data-university='["tokyo","kyoto"]'
64
64
  data-major='["science","engineering"]'
65
- data-graduate='["goSame"]'
65
+ data-graduate='["goSame","goDiffe"]'
66
- >国公立理系院進(同大学)学費: xx万円
66
+ >国公立理系院進学費: xx万円
67
67
  </li>
68
68
  <li class="list_item"
69
69
  data-university='["tokyo","kyoto"]'
70
70
  data-major='["science","engineering"]'
71
- data-graduate='["goDiffe"]'
72
- >国公立理系院進(他大学)学費: xx万円
73
- </li>
74
- <li class="list_item"
75
- data-university='["tokyo","kyoto"]'
71
+ data-graduate='["work","establish"]'
76
- data-major='["science","engineering"]'
77
- data-graduate='["work"]'
78
72
  >国公立理系就職学費: xx万円
79
73
  </li>
80
74
  <li class="list_item"
81
75
  data-university='["tokyo","kyoto"]'
82
- data-major='["science","engineering"]'
76
+ data-major='["letters","law"]'
83
- data-graduate='["establish"]'
77
+ data-graduate='["goSame","goDiffe"]'
84
- >国公立理系起業学費: xx万円
78
+ >国公立文系院進学費: xx万円
85
79
  </li>
86
80
  <li class="list_item"
87
81
  data-university='["tokyo","kyoto"]'
88
82
  data-major='["letters","law"]'
89
- data-graduate='["goSame"]'
90
- >国公立文系院進(同大学)学費: xx万円
91
- </li>
92
- <li class="list_item"
93
- data-university='["tokyo","kyoto"]'
94
- data-major='["letters","law"]'
83
+ data-graduate='["work","establish"]'
95
- data-graduate='["goSame"]'
96
- >国公立文系院進(他大学)学費: xx万円
97
- </li>
98
- <li class="list_item"
99
- data-university='["tokyo","kyoto"]'
100
- data-major='["letters","law"]'
101
- data-graduate='["work"]'
102
84
  >国公立文系就職学費: xx万円
103
- </li>
104
- <li class="list_item"
105
- data-university='["tokyo","kyoto"]'
106
- data-major='["letters","law"]'
107
- data-graduate='["establish"]'
108
- >国公立文系起業学費: xx万円
109
85
  </li>
110
86
  <li class="list_item"
111
87
  data-university='["keio","waseda"]'
112
88
  data-major='["science","engineering"]'
113
- data-graduate='["goSame"]'
89
+ data-graduate='["goSame","goDiffe"]'
114
- >私立理系院進(同大学)学費: xx万円
90
+ >私立理系院進学費: xx万円
115
91
  </li>
116
92
  <li class="list_item"
117
93
  data-university='["keio","waseda"]'
118
94
  data-major='["science","engineering"]'
119
- data-graduate='["goDiffe"]'
120
- >私立理系院進(他大学)学費: xx万円
121
- </li>
122
- <li class="list_item"
123
- data-university='["keio","waseda"]'
95
+ data-graduate='["work","establish"]'
124
- data-major='["science","engineering"]'
125
- data-graduate='["work"]'
126
96
  >私立理系就職学費: xx万円
127
- </li>
128
- <li class="list_item"
129
- data-university='["keio","waseda"]'
130
- data-major='["science","engineering"]'
131
- data-graduate='["establish"]'
132
- >私立理系起業学費: xx万円
133
97
  </li>
134
98
  <li class="list_item"
135
99
  data-university='["keio","waseda"]'
136
100
  data-major='["letters","law"]'
137
- data-graduate='["goSame"]'
101
+ data-graduate='["goSame","goDiffe"]'
138
- >私立文系院進(同大学)学費: xx万円
102
+ >私立文系院進学費: xx万円
139
103
  </li>
140
104
  <li class="list_item"
141
105
  data-university='["keio","waseda"]'
142
106
  data-major='["letters","law"]'
143
- data-graduate='["goDiffe"]'
144
- >私立文系院進(他大学)学費: xx万円
145
- </li>
146
- <li class="list_item"
147
- data-university='["keio","waseda"]'
148
- data-major='["letters","law"]'
149
- data-graduate='["work"]'
107
+ data-graduate='["work",establish]'
150
108
  >私立文系就職学費: xx万円
151
- </li>
152
- <li class="list_item"
153
- data-university='["keio","waseda"]'
154
- data-major='["letters","law"]'
155
- data-graduate='["establish"]'
156
- >私立文系起業学費: xx万円
157
109
  </li>
158
110
  </ul>
159
111
  ```
HTML5checkboxJavaScript

3

htmlを変更

2022/03/11 09:18

投稿

maniandmani
maniandmani

スコア1

test CHANGED
File without changes
test CHANGED
@@ -53,15 +53,23 @@
53
53
  </ul>
54
54
  <hr>
55
55
  <ul>
56
- <li><label><input type="checkbox" name="graduate" value="go">院進</label></li>
56
+ <li><label><input type="checkbox" name="graduate" value="goSame">院進(同大学)</label></li>
57
+ <li><label><input type="checkbox" name="graduate" value="goDiffe">院進(違大学)</label></li>
57
58
  <li><label><input type="checkbox" name="graduate" value="work">就職</label></li>
59
+ <li><label><input type="checkbox" name="graduate" value="establish">起業</label></li>
58
60
  <hr>
59
61
  <ul class="list">
60
62
  <li class="list_item"
61
63
  data-university='["tokyo","kyoto"]'
62
64
  data-major='["science","engineering"]'
63
- data-graduate='["go"]'
65
+ data-graduate='["goSame"]'
64
- >国公立理系院進学費: xx万円
66
+ >国公立理系院進(同大学)学費: xx万円
67
+ </li>
68
+ <li class="list_item"
69
+ data-university='["tokyo","kyoto"]'
70
+ data-major='["science","engineering"]'
71
+ data-graduate='["goDiffe"]'
72
+ >国公立理系院進(他大学)学費: xx万円
65
73
  </li>
66
74
  <li class="list_item"
67
75
  data-university='["tokyo","kyoto"]'
@@ -71,9 +79,21 @@
71
79
  </li>
72
80
  <li class="list_item"
73
81
  data-university='["tokyo","kyoto"]'
82
+ data-major='["science","engineering"]'
83
+ data-graduate='["establish"]'
84
+ >国公立理系起業学費: xx万円
85
+ </li>
86
+ <li class="list_item"
87
+ data-university='["tokyo","kyoto"]'
74
- data-major='["letters","law"]'
88
+ data-major='["letters","law"]'
75
- data-graduate='["go"]'
89
+ data-graduate='["goSame"]'
76
- >国公立文系院進学費: xx万円
90
+ >国公立文系院進(同大学)学費: xx万円
91
+ </li>
92
+ <li class="list_item"
93
+ data-university='["tokyo","kyoto"]'
94
+ data-major='["letters","law"]'
95
+ data-graduate='["goSame"]'
96
+ >国公立文系院進(他大学)学費: xx万円
77
97
  </li>
78
98
  <li class="list_item"
79
99
  data-university='["tokyo","kyoto"]'
@@ -82,10 +102,22 @@
82
102
  >国公立文系就職学費: xx万円
83
103
  </li>
84
104
  <li class="list_item"
105
+ data-university='["tokyo","kyoto"]'
106
+ data-major='["letters","law"]'
107
+ data-graduate='["establish"]'
108
+ >国公立文系起業学費: xx万円
109
+ </li>
110
+ <li class="list_item"
85
- data-university='["keio","waseda"]'
111
+ data-university='["keio","waseda"]'
86
- data-major='["science","engineering"]'
112
+ data-major='["science","engineering"]'
87
- data-graduate='["go"]'
113
+ data-graduate='["goSame"]'
88
- >私立理系院進学費: xx万円
114
+ >私立理系院進(同大学)学費: xx万円
115
+ </li>
116
+ <li class="list_item"
117
+ data-university='["keio","waseda"]'
118
+ data-major='["science","engineering"]'
119
+ data-graduate='["goDiffe"]'
120
+ >私立理系院進(他大学)学費: xx万円
89
121
  </li>
90
122
  <li class="list_item"
91
123
  data-university='["keio","waseda"]'
@@ -94,16 +126,34 @@
94
126
  >私立理系就職学費: xx万円
95
127
  </li>
96
128
  <li class="list_item"
97
- data-university='["keio","waseda"]'
129
+ data-university='["keio","waseda"]'
130
+ data-major='["science","engineering"]'
131
+ data-graduate='["establish"]'
132
+ >私立理系起業学費: xx万円
133
+ </li>
134
+ <li class="list_item"
135
+ data-university='["keio","waseda"]'
98
- data-major='["letters","law"]'
136
+ data-major='["letters","law"]'
99
- data-graduate='["go"]'
137
+ data-graduate='["goSame"]'
100
- >私立文系院進学費: xx万円
138
+ >私立文系院進(同大学)学費: xx万円
139
+ </li>
140
+ <li class="list_item"
141
+ data-university='["keio","waseda"]'
142
+ data-major='["letters","law"]'
143
+ data-graduate='["goDiffe"]'
144
+ >私立文系院進(他大学)学費: xx万円
101
145
  </li>
102
146
  <li class="list_item"
103
147
  data-university='["keio","waseda"]'
104
148
  data-major='["letters","law"]'
105
149
  data-graduate='["work"]'
106
150
  >私立文系就職学費: xx万円
151
+ </li>
152
+ <li class="list_item"
153
+ data-university='["keio","waseda"]'
154
+ data-major='["letters","law"]'
155
+ data-graduate='["establish"]'
156
+ >私立文系起業学費: xx万円
107
157
  </li>
108
158
  </ul>
109
159
  ```
HTML5checkboxJavaScript

2

アドバイスを踏まえてコードを変更しました。

2022/03/08 06:17

投稿

maniandmani
maniandmani

スコア1

test CHANGED
File without changes
test CHANGED
@@ -33,294 +33,125 @@
33
33
 
34
34
  ### **4. コード**
35
35
  一番最初にcodepenのリンクを共有しましたが、一応こちらにもコードを共有しておきます。
36
+
37
+ 変更後
36
38
  ```html
37
- <!doctype html>
38
- <html class="no-js" lang="">
39
-
40
- <head>
41
- <meta charset="utf-8">
42
- <title></title>
43
- <meta name="description" content="">
44
- <meta name="viewport" content="width=device-width, initial-scale=1">
45
-
46
- <meta property="og:title" content="">
47
- <meta property="og:type" content="">
48
- <meta property="og:url" content="">
49
- <meta property="og:image" content="">
50
-
51
- <link rel="manifest" href="site.webmanifest">
52
- <link rel="apple-touch-icon" href="icon.png">
53
- <!-- Place favicon.ico in the root directory -->
54
-
55
- <!-- CSS -->
56
- <link rel="stylesheet" href="css/style.css" />
57
- <link rel="stylesheet" href="omutuprice.css">
58
-
59
- <!-- jQuery -->
60
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
61
- <script src="js/script.js"></script>
62
-
63
-
64
- <meta name="theme-color" content="#fafafa">
65
- </head>
66
-
67
- <body>
68
- <form>
69
- <div class="search-box university">
70
- <h2 class="search-box_label">大学:</h2>
71
- <ul>
72
- <li>
73
- <input type="checkbox" name="university" value="tokyo" id="tokyo">
74
- <label for="tokyo" class="label">東京大学</label>
75
- </li>
76
- <li>
77
- <input type="checkbox" name="university" value="kyoto" id="kyoto">
78
- <label for="kyoto" class="label">京都大学</label>
79
- </li>
80
- <li>
81
- <input type="checkbox" name="univeristy" value="keio" id="keio">
82
- <label for="keio" class="label">慶應大学</label>
83
- </li>
84
- <li>
85
- <input type="checkbox" name="university" value="waseda" id="waseda">
86
- <label for="waseda" class="label">早稲田大学</label>
87
- </li>
88
- </ul>
89
- </div>
90
-
91
- <div class="search-box major">
92
- <h2 class="search-box_label">専攻:</h2>
93
- <ul>
94
- <li>
95
- <input type="checkbox" name="major" value="science" id="science">
96
- <label for="science" class="label">理学部</label>
97
- </li>
98
- <li>
99
- <input type="checkbox" name="major" value="engineering" id="engineering">
100
- <label for="engineering" class="label">工学部</label>
101
- </li>
102
- <li>
103
- <input type="checkbox" name="major" value="letters" id="letters">
104
- <label for="letters" class="label">文学部</label>
105
- </li>
106
- <li>
107
- <input type="checkbox" name="major" value="law" id="law">
108
- <label for="law" class="label">法学部</label>
109
- </li>
110
- </ul>
111
- </div>
112
-
113
- <ul class="list">
114
-
115
- <li class="list_item"
116
- data-university='["tokyo","kyoto"]'
117
- data-major='["science","engineering"]'
118
- >
119
- <br>
120
- 国公立理系学費: xx万円
121
- </li>
122
-
123
- <li class="list_item"
124
- data-university='["tokyo","kyoto"]'
125
- data-major='["letters","law"]'
126
- >
127
- <br>
128
- 国公立文系学費: xx万円
129
- </li>
130
-
131
- <li class="list_item"
132
- data-university='["keio","waseda"]'
133
- data-major='["science","engineering"]'
134
- >
135
- <br>
136
- 私立理系学費: xx万円
137
- </li>
138
-
139
- <li class="list_item"
140
- data-university='["keio","waseda"]'
141
- data-major='["letters","law"]'
142
- >
143
- <br>
144
- 私立文系学費: xx万円
145
- </li>
146
-
147
- </ul>
148
- </form>
149
- </body>
150
- ```
151
- ```CSS
152
- ul {
153
- padding: 0;
154
- }
155
- li {
156
- list-style: none;
157
- }
158
- form {
159
- background: #ffffff;
160
- padding: 10px 10px;
161
- border-radius: 5px;
162
- }
163
- form ul {
164
- display: flex;
165
- flex-wrap: wrap;
166
- }
167
- input[type="checkbox"] {
168
- display: none;
169
- }
170
- .university input[type="checkbox"]:checked + label {
171
- background: #4d84f4; /* マウス選択時の背景色を指定する */
172
- color: #ffffff; /* マウス選択時のフォント色を指定する */
173
- }
174
- .major input[type="checkbox"]:checked + label {
175
- background: #4d84f4; /* マウス選択時の背景色を指定する */
176
- color: #ffffff; /* マウス選択時のフォント色を指定する */
177
- }
178
- .university .label:hover {
179
- background-color: #b7cdfa; /* マウスオーバー時の背景色を指定する */
180
- }
181
- .major .label:hover {
182
- background-color: #b7cdfa; /* マウスオーバー時の背景色を指定する */
183
- }
184
-
185
-
186
- .label {
187
- display: inline-block; /* 文字列長に合わせる */
188
- margin: 5px; /* ボックス外側の余白を指定する */
189
- /*width: 100px; /* ボックスの横幅を指定する */
190
- height: 45px; /* ボックスの高さを指定する */
191
- padding-left: 15px; /* ボックス内左側の余白を指定する */
192
- padding-right: 15px; /* ボックス内御右側の余白を指定する */
193
- text-align: center; /* テキストのセンタリングを指定する */
194
- line-height: 45px; /* 行の高さを指定する */
195
- cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
196
- border-radius: 15px; /* 角丸を指定する */
197
- }
198
-
199
- .university .label {
200
- border: 2px solid #4d84f4; /* ボックスの境界線を実線で指定する */
201
- color: #4d84f4; /* フォントの色を指定 */
202
- }
203
- .major .label {
204
- border: 2px solid #4d84f4; /* ボックスの境界線を実線で指定する */
205
- color: #4d84f4; /* フォントの色を指定 */
206
- }
207
-
208
-
209
- .search-box_label {
210
- font-weight: bold;
211
- }
212
- .is-hide {
213
- display: none;
214
- }
215
-
216
- .list_toggle {
217
- display: none;
218
- }
219
-
220
- .under_line {
221
- width: 500px;
222
- }
223
- .search-box h2 {
224
- margin: 0;
225
- }
226
-
227
- .nothing {
228
- display: none;
229
- }
230
-
231
- .list {
232
- display: flex;
233
- flex-wrap: wrap;
234
- }
235
- .list li {
236
- width: 300px;
237
- height: 200px;
238
- padding: 20px;
239
- margin: 20px;
240
- object-fit: cover;
241
- }
242
-
243
- .list li img {
244
- width: 100%;
245
- /* height: 100%; */
246
- object-fit: cover;
247
- }
39
+ <form>
40
+ <ul>
41
+ <li>
42
+ <label><input type="checkbox" name="university" value="tokyo">東京大学</label></li>
43
+ <li><label><input type="checkbox" name="university" value="kyoto">京都大学</label></li>
44
+ <li><label><input type="checkbox" name="university" value="keio">慶應大学</label></li>
45
+ <li><label><input type="checkbox" name="university" value="waseda">早稲田大学</label></li>
46
+ </ul>
47
+ <hr>
48
+ <ul>
49
+ <li><label><input type="checkbox" name="major" value="science">理学部</label></li>
50
+ <li><label><input type="checkbox" name="major" value="engineering">工学部</label></li>
51
+ <li><label><input type="checkbox" name="major" value="letters">文学部</label></li>
52
+ <li><label><input type="checkbox" name="major" value="law">法学部</label></li>
53
+ </ul>
54
+ <hr>
55
+ <ul>
56
+ <li><label><input type="checkbox" name="graduate" value="go">院進</label></li>
57
+ <li><label><input type="checkbox" name="graduate" value="work">就職</label></li>
58
+ <hr>
59
+ <ul class="list">
60
+ <li class="list_item"
61
+ data-university='["tokyo","kyoto"]'
62
+ data-major='["science","engineering"]'
63
+ data-graduate='["go"]'
64
+ >国公立理系院進学費: xx万円
65
+ </li>
66
+ <li class="list_item"
67
+ data-university='["tokyo","kyoto"]'
68
+ data-major='["science","engineering"]'
69
+ data-graduate='["work"]'
70
+ >国公立理系就職学費: xx万円
71
+ </li>
72
+ <li class="list_item"
73
+ data-university='["tokyo","kyoto"]'
74
+ data-major='["letters","law"]'
75
+ data-graduate='["go"]'
76
+ >国公立文系院進学費: xx万円
77
+ </li>
78
+ <li class="list_item"
79
+ data-university='["tokyo","kyoto"]'
80
+ data-major='["letters","law"]'
81
+ data-graduate='["work"]'
82
+ >国公立文系就職学費: xx万円
83
+ </li>
84
+ <li class="list_item"
85
+ data-university='["keio","waseda"]'
86
+ data-major='["science","engineering"]'
87
+ data-graduate='["go"]'
88
+ >私立理系院進学費: xx万円
89
+ </li>
90
+ <li class="list_item"
91
+ data-university='["keio","waseda"]'
92
+ data-major='["science","engineering"]'
93
+ data-graduate='["work"]'
94
+ >私立理系就職学費: xx万円
95
+ </li>
96
+ <li class="list_item"
97
+ data-university='["keio","waseda"]'
98
+ data-major='["letters","law"]'
99
+ data-graduate='["go"]'
100
+ >私立文系院進学費: xx万円
101
+ </li>
102
+ <li class="list_item"
103
+ data-university='["keio","waseda"]'
104
+ data-major='["letters","law"]'
105
+ data-graduate='["work"]'
106
+ >私立文系就職学費: xx万円
107
+ </li>
108
+ </ul>
248
109
  ```
249
110
  ```JavaScript
250
- /**
111
+
251
- * 画像が用意されていない場合に、no_image.jpegを表示させるコード
252
- **/
253
- /**
254
- * チェックボックスがクリックされた瞬間を拾うコード
255
- **/
256
- $(function() {
257
- $(".label").click(function() {
258
- $(".list li").removeClass("list_toggle");
112
+ document.addEventListener('change',e=>{
259
- });
113
+ const t=e.target;
260
- if ($(".list li").hasClass("list_toggle")) {
114
+ if(t.closest('[name=university],[name=major]')){
115
+ const univ=[...document.querySelectorAll('[name=university]:checked')].map(x=>x.value);
116
+ const majo=[...document.querySelectorAll('[name=major]:checked')].map(x=>x.value);
117
+ document.querySelectorAll('.list_item').forEach(x=>{
118
+ let flg=false;
261
- $(".reset .reset-button").click(function() {
119
+ if(univ.length>0 || majo.length>0){
120
+ flg=true &&
121
+ (univ.length==0 || JSON.parse(x.dataset.university).filter(y=>univ.indexOf(y)>=0).length) &&
122
+ (majo.length==0 || JSON.parse(x.dataset.major).filter(y=>majo.indexOf(y)>=0).length)
123
+ }
262
- $(".list li").addClass("list_toggle");
124
+ x.toggleAttribute('hidden',!flg);
263
125
  });
264
126
  }
265
127
  });
266
-
267
- /**
268
- * 絞り込み機能
269
- **/
270
- var searchBox = ".search-box"; // 絞り込む項目を選択するエリア
128
+ window.addEventListener('DOMContentLoaded', ()=>{
271
- var listItem = ".list_item"; // 絞り込み対象のアイテム
129
+ const e = new CustomEvent("HTMLEvents");
130
+ e.initEvent('change', true, true );
131
+ document.querySelector('[name=univerdocument.addEventListener('change',e=>{
132
+ const t=e.target;
133
+ if(t.closest('[name=university],[name=major],[name=graduate]')){
134
+ const univ=[...document.querySelectorAll('[name=university]:checked')].map(x=>x.value);
272
- var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名
135
+ const majo=[...document.querySelectorAll('[name=major]:checked')].map(x=>x.value);
273
-
274
- $(function() {
275
- // 絞り込み項目を変更した時
136
+ const grad=[...document.querySelectorAll('[name=graduate]:checked')].map(x=>x.value);
276
- $(document).on("change", searchBox + " input", function() {
137
+ document.querySelectorAll('.list_item').forEach(x=>{
277
- search_filter();
138
+ let flg=false;
139
+ if(univ.length>0 || majo.length>0 || grad.length>0){
140
+ flg=true &&
141
+ (univ.length==0 || JSON.parse(x.dataset.university).filter(y=>univ.indexOf(y)>=0).length) &&
142
+ (majo.length==0 || JSON.parse(x.dataset.major).filter(y=>majo.indexOf(y)>=0).length) &&
143
+ (grad.length==0 || JSON.parse(x.dataset.graduate).filter(y=>grad.indexOf(y)>=0).length)
144
+ }
145
+ x.toggleAttribute('hidden',!flg);
278
- });
146
+ });
147
+ }
148
+ });
149
+ window.addEventListener('DOMContentLoaded', ()=>{
150
+ const e = new CustomEvent("HTMLEvents");
151
+ e.initEvent('change', true, true );
152
+ document.querySelector('[name=university]').dispatchEvent(e);
153
+ });sity]').dispatchEvent(e);
279
154
  });
280
155
 
281
- /**
282
- * リストの絞り込みを行う
283
- */
284
- function search_filter() {
285
- // 非表示状態を解除
286
- $(listItem).removeClass(hideClass);
287
- for (var i = 0; i < $(searchBox).length; i++) {
288
- var name = $(searchBox)
289
- .eq(i)
290
- .find("input")
291
- .attr("name");
292
- // 選択されている項目を取得
293
- var searchData = get_selected_input_items(name);
294
- // 選択されている項目がない、またはALLを選択している場合は飛ばす
295
- if (searchData.length === 0 || searchData[0] === "") {
296
- continue;
297
- }
298
- // リスト内の各アイテムをチェック
299
- for (var j = 0; j < $(listItem).length; j++) {
300
- // アイテムに設定している項目を取得
301
- var itemData = $(listItem)
302
- .eq(j)
303
- .data(name);
304
- // 絞り込み対象かどうかを調べる
305
- if (searchData.indexOf(itemData) === -1) {
306
- $(listItem)
307
- .eq(j)
308
- .addClass(hideClass);
309
- }
310
- }
311
- }
312
- }
313
156
 
314
- /**
315
- * inputで選択されている値の一覧を取得する
316
- * @param {String} name 対象にするinputのname属性の値
317
- * @return {Array} 選択されているinputのvalue属性の値
318
- */
319
- function get_selected_input_items(name) {
320
- var searchData = [];
321
- $("[name=" + name + "]:checked").each(function() {
322
- searchData.push($(this).val());
323
- });
324
- return searchData;
325
- }
326
157
  ```
HTML5checkboxJavaScript

1

見出しを整えました

2022/03/06 00:13

投稿

maniandmani
maniandmani

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,5 @@
1
- 1. 前提、実現したいこと
1
+ ### **1. 前提、実現したいこと**
2
- 国公立/私立 大学の　理系/文系 による学費の違いをプログラミングで表示する[システム](https://codepen.io/maniandmani/pen/eYeXmWo)を作りたいと考えております。
2
+ 国公立/私立 大学の　理系/文系 による学費の違いをプログラミングで表示する[システム(codepen)](https://codepen.io/maniandmani/pen/eYeXmWo)を作りたいと考えております。
3
3
  元のhtmlデータはもっと多いですが、質問する際に必要な最低限のコードだけ共有いたします。
4
4
  ボタンをcheckするごとに表示されるリストがだんだんと少なくなっていき、絞られていくイメージなので、「大学」と「学部」のどちらの項目がcheckされている必要はないです。
5
5
 
@@ -8,11 +8,11 @@
8
8
  - JSで記述する必要があるのでしたら、具体的にどの部分をどのように記述すれば良いかを教えて頂きたい
9
9
  JSに関してはほぼ何もわかっていない状況ですので、このコードを使えば？というアドバイスだけでは解決できないレベルです...
10
10
 
11
- 2. 発生している問題
11
+ ### **2. 発生している問題**
12
- ひとつのdata-属性に関して、複数のimputのどれがcheckされても良いようなコードを知りたいです。
12
+ **ひとつのdata-属性に関して、複数のimputのどれがcheckされても良いようなコードを知りたいです。
13
13
  具体的には、「東京大学」「京都大学」のどちらが押されても、国公立大学の理系/文系の学費が表示されて欲しいです。
14
14
 
15
- 3. 自分で試したこと
15
+ ### **3. 自分で試したこと**
16
16
  Excelでいう "①" or "②" or "③" のようにできたらいいなと考えていたので、htmlの記述を
17
17
 
18
18
  ```html
@@ -31,7 +31,7 @@
31
31
  ```
32
32
  このように試してみましたが、うまくいきません。やはりJSで記述する必要があるのでしょうか。
33
33
 
34
- 4. コード
34
+ ### **4. コード**
35
35
  一番最初にcodepenのリンクを共有しましたが、一応こちらにもコードを共有しておきます。
36
36
  ```html
37
37
  <!doctype html>
HTML5checkboxJavaScript