質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2665閲覧

曜日をクリックすると、その曜日のすべての日が選択されるカレンダー

hibikikudo

総合スコア238

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/05 07:08

###前提・実現したいこと
曜日をクリックすると、その曜日のすべての日が選択されるカレンダーを作った。
動くサンプル
これを現在の機能を残したまま別のチェックボックスからも操作したいと考えたがうまく動かない。
うまくいかないサンプル

###発生している問題・エラーメッセージ
単純に同じクラスを振り分ける方法ではうまくいかない。
また、複数のチェックボックスをcheckedにした際にはすべてチェックされてほしいが、この挙動も期待通りでない。

###該当のソースコード

html

1<label for=""><input type="checkbox" class="js-dow">月曜</label> 2<label for=""><input type="checkbox" class="js-dow">火曜</label> 3<label for=""><input type="checkbox" class="js-dow">水曜</label> 4<label for=""><input type="checkbox" class="js-dow">木曜</label> 5<label for=""><input type="checkbox" class="js-dow">金曜</label> 6<label for=""><input type="checkbox" class="js-dow">土曜</label> 7<label for=""><input type="checkbox" class="js-dow">日曜</label> 8<table> 9 <tr> 10 <th class="js-dow">mon</th> 11 <th class="js-dow">tue</th> 12 <th class="js-dow">wed</th> 13 <th class="js-dow">thu</th> 14 <th class="js-dow">fri</th> 15 <th class="js-dow">sat</th> 16 <th class="js-dow">sun</th> 17 </tr> 18 <tr> 19 <td>1</td> 20 <td>2</td> 21 <td>3</td> 22 <td>4</td> 23 <td>5</td> 24 <td>6</td> 25 <td>7</td> 26 </tr> 27 <tr> 28 <td>8</td> 29 <td>9</td> 30 <td>10</td> 31 <td>11</td> 32 <td>12</td> 33 <td>13</td> 34 <td>14</td> 35 </tr> 36 <tr> 37 <td>15</td> 38 <td>16</td> 39 <td>17</td> 40 <td>18</td> 41 <td>19</td> 42 <td>20</td> 43 <td>21</td> 44 </tr> 45 <tr> 46 <td>22</td> 47 <td>23</td> 48 <td>24</td> 49 <td>25</td> 50 <td>26</td> 51 <td>27</td> 52 <td>28</td> 53 </tr> 54</table>

javascript

1$(function() { 2 $(".js-dow").on("click", function() { 3 var dow = $(".js-dow").index(this); 4 var tr = $("tr"); 5 var td = $("td"); 6 if (td.hasClass("selected")) { 7 td.removeClass("selected") 8 } else { 9 tr.each(function() { 10 $(this).find(td).eq(dow).addClass('selected'); 11 }); 12 } 13 }); 14});

何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

<th>をクリック時に反応しない --- js-dowクラスが当たっている要素が全部で14個あります(checkboxで7つ、thで7つ)。
var dow = $(".js-dow").index(this);
<th>をクリックした際にdowに入る値が8以上になるため、
$(this).find(td).eq(dow).addClass('selected');

ここでの指定が存在しないindexを指しているため、反応しないのでしょう。
dowの値を見て、8以上の場合は調整する必要があります。

複数のチェックボックスをcheckedにした場合

if (td.hasClass("selected")) { td.removeClass("selected") } else { ... }

この部分でクリックされた曜日とselectedの指定されている<td>の関連を見ずに、selectedが指定されていることだけで処理を振り分けているため、期待する動作にならないのだと思います。
クリックされた曜日に該当する<td>がselectedかどうかの判定を加えて下さい。

補足

(1)<th>をクリックした際に、表示の一貫性を保つためにcheckboxの状態も適宜変更する必要があります。
(2)個人的には<th>にも各曜日が現在選択状態かどうかのクラスを持たせて、そちらを見て処理の振り分けを行う方がわかりやすいと思います。

投稿2016/10/05 07:42

KaedeKazane

総合スコア408

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hibikikudo

2016/10/06 05:13

ありがとうございます。ロジックの組み立て方が大変参考になりました。
guest

0

ベストアンサー

javascript

1$(function() { 2 $('.js-dow').on('change', function() { 3 var flg=$(this).prop('checked'); 4 var dow=$('.js-dow').index(this); 5 $('#t1 tr').each(function() { 6 $(this).find('td,th').eq(dow).toggleClass('selected',flg); 7 }); 8 }).change(); 9}); 10

※一応tableを確定させるためにtableにid="t1"を指定してください。
※thも対象ですか?軽微な修正なのでソースを修正しときました
find('td')→find('td,th')

追記

よくみたらもとの機能はそのままなんですね
ではこんな感じで

javascript

1$(function() { 2 $('#t1 tr:first-child th').on('click', function() { 3 var dow=$('#t1 tr:first-child th').index(this); 4 $('.js-dow').eq(dow).prop('checked',function( index, prop ){return !prop;}).change(); 5 }); 6 $('.js-dow').on('change', function() { 7 var flg=$(this).prop('checked'); 8 var dow=$('.js-dow').index(this); 9 $('#t1 tr').each(function() { 10 $(this).find('td,th').eq(dow).toggleClass('selected',flg); 11 }); 12 }).change(); 13}); 14

ついでにHTMLもほぼ提示のままですが

HTML

1<input type="checkbox" class="js-dow">月曜 2<input type="checkbox" class="js-dow">火曜 3<input type="checkbox" class="js-dow">水曜 4<input type="checkbox" class="js-dow">木曜 5<input type="checkbox" class="js-dow">金曜 6<input type="checkbox" class="js-dow">土曜 7<input type="checkbox" class="js-dow">日曜 8 9<table id="t1"> 10 <tr> 11 <th class="js-dow">mon</th> 12 <th class="js-dow">tue</th> 13 <th class="js-dow">wed</th> 14 <th class="js-dow">thu</th> 15 <th class="js-dow">fri</th> 16 <th class="js-dow">sat</th> 17 <th class="js-dow">sun</th> 18 </tr> 19 <tr> 20 <td>1</td> 21 <td>2</td> 22 <td>3</td> 23 <td>4</td> 24 <td>5</td> 25 <td>6</td> 26 <td>7</td> 27 </tr> 28 <tr> 29 <td>8</td> 30 <td>9</td> 31 <td>10</td> 32 <td>11</td> 33 <td>12</td> 34 <td>13</td> 35 <td>14</td> 36 </tr> 37 <tr> 38 <td>15</td> 39 <td>16</td> 40 <td>17</td> 41 <td>18</td> 42 <td>19</td> 43 <td>20</td> 44 <td>21</td> 45 </tr> 46 <tr> 47 <td>22</td> 48 <td>23</td> 49 <td>24</td> 50 <td>25</td> 51 <td>26</td> 52 <td>27</td> 53 <td>28</td> 54 </tr> 55</table>

投稿2016/10/05 07:37

編集2016/10/05 08:27
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hibikikudo

2016/10/06 05:12

ありがとうございます。大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問