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

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

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

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

jQuery

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

Q&A

解決済

3回答

2287閲覧

平日のみ一括選択するカレンダー

hibikikudo

総合スコア238

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/10/11 11:21

編集2016/10/12 02:36

###前提・実現したいこと
曜日をクリックすると、その曜日のすべての日が選択されるカレンダーに関連した質問です。
jQueryで平日のみを一括選択するカレンダーを作りたいのですがうまくいきません。

###発生している問題・エラーメッセージ
祝日を判定して除外するロジックがわからない。

###該当のソースコード
JSFiddle動くサンプル

HTML

1<label for=""> 2 <input type="checkbox" class="js-dow js-weekday">月曜</label> 3<label for=""> 4 <input type="checkbox" class="js-dow js-weekday">火曜</label> 5<label for=""> 6 <input type="checkbox" class="js-dow js-weekday">水曜</label> 7<label for=""> 8 <input type="checkbox" class="js-dow js-weekday">木曜</label> 9<label for=""> 10 <input type="checkbox" class="js-dow js-weekday">金曜</label> 11<label for=""> 12 <input type="checkbox" class="js-dow js-holiday">土曜</label> 13<label for=""> 14 <input type="checkbox" class="js-dow js-holiday">日曜</label> 15<label for=""> 16 <input type="checkbox" class="js-dow js-holiday js-nh">祝日</label> 17<label for=""> 18 <input type="checkbox" id="selectHolidays">土日祝日</label> 19<label for=""> 20 <input type="checkbox" id="selectWeekdays">平日</label> 21<table id="t1"> 22 <tr> 23 <th class="js-dow">mon</th> 24 <th class="js-dow">tue</th> 25 <th class="js-dow">wed</th> 26 <th class="js-dow">thu</th> 27 <th class="js-dow">fri</th> 28 <th class="js-dow">sat</th> 29 <th class="js-dow">sun</th> 30 </tr> 31 <tr> 32 <td class="js-national-holiday">1</td> 33 <td>2</td> 34 <td>3</td> 35 <td>4</td> 36 <td>5</td> 37 <td>6</td> 38 <td>7</td> 39 </tr> 40 <tr> 41 <td>8</td> 42 <td>9</td> 43 <td>10</td> 44 <td>11</td> 45 <td>12</td> 46 <td>13</td> 47 <td>14</td> 48 </tr> 49 <tr> 50 <td>15</td> 51 <td>16</td> 52 <td>17</td> 53 <td>18</td> 54 <td>19</td> 55 <td>20</td> 56 <td>21</td> 57 </tr> 58 <tr> 59 <td>22</td> 60 <td>23</td> 61 <td>24</td> 62 <td>25</td> 63 <td>26</td> 64 <td>27</td> 65 <td>28</td> 66 </tr> 67</table> 68

Javascript

1$(function() { 2 var cell = $('#t1 td'); 3 cell.on("click", function() { 4 if (!$(this).parent().hasClass('.disable') && !$(this).hasClass('selected')) { 5 $(this).addClass('selected'); 6 } else if (!$(this).parent().hasClass('disable') && $(this).hasClass('selected')) { 7 $(this).removeClass('selected'); 8 } 9 }); 10 11 $(".js-dow").on("change", function() { 12 var flg = $(this).prop('checked'); 13 var dow = $(".js-dow").index(this); 14 $("#t1 tr").each(function() { 15 $(this).find('td').eq(dow).toggleClass('selected', flg); 16 }); 17 }).change(); 18 19 $(".js-nh").on("change", function() { 20 var flg = $(this).prop('checked'); 21 var nh = $(".js-nh").index(this); 22 var hol = $(".js-national-holiday"); 23 $("#t1 tr").each(function() { 24 $(this).find(hol).eq(nh).toggleClass('selected', flg); 25 }); 26 }).change(); 27 28 var selectHolidays = $("#selectHolidays"); 29 selectHolidays.on('click', function() { 30 var dow = selectHolidays.index(this); 31 if (selectHolidays.is(':checked')) { 32 $('.js-holiday').prop('checked', true).change(); 33 } else { 34 $('.js-holiday').prop('checked', false).change(); 35 } 36 }); 37 38 var selectWeekdays = $("#selectWeekdays"); 39 selectWeekdays.on('click', function() { 40 var dow = selectWeekdays.index(this); 41 if (selectWeekdays.is(':checked')) { 42 $('.js-weekday').prop('checked', true).change(); 43 } else { 44 $('.js-weekday').prop('checked', false).change(); 45 } 46 }); 47 48});

試してみたこと

10/12追記:各位ご回答いただきありがとうございます。
下記のように書いてみましたがまだうまくいきませんでした…

(https://jsfiddle.net/gs2fbvmx/17/)

javascript

1 $(".js-dow").on("change", function() { 2 var flg = $(this).prop('checked'); 3 var dow = $(".js-dow").index(this); 4 var hol = $(".js-nh").index(this); 5 var td = $('td'); 6 $("#t1 tr").each(function() { 7 if (td.hasClass('.js-national-holiday').length) { 8 $(this).find('td').eq(hol).toggleClass('selected', flg); 9 } else { 10 $(this).find('td').eq(dow).toggleClass('selected', flg); 11 } 12 }); 13 }).change();

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

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

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

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

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

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

guest

回答3

0

平日を選択した場合にjs-national-holidayクラスを持つ1日を除外したいってことでしょうか?
月~金曜を選択した場合でも、休日を除外してよいのなら
$(".js-dow").on("change", function() { ~ のeach中でクラス判定をして除外すればよいと思います。


追記
js-national-holidayクラスを持つtdを除外

javasccript

1$(".js-dow").on("change", function() { 2 var flg = $(this).prop('checked'); 3 var dow = $(".js-dow").index(this); 4 $("#t1 tr").each(function() { 5 // not()でjs-national-holidayクラスを持っているtdを除外 6 $(this).find('td').eq(dow).not(".js-national-holiday").toggleClass('selected', flg); 7 }); 8 }).change(); 9

投稿2016/10/11 12:52

編集2016/10/12 23:52
attercop

総合スコア246

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

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

hibikikudo

2016/10/12 02:33

ご回答いただきありがとうございます。 下記のように書いてみましたがまだうまくいきませんでした… (https://jsfiddle.net/gs2fbvmx/17/) ```javascript $(".js-dow").on("change", function() { var flg = $(this).prop('checked'); var dow = $(".js-dow").index(this); var hol = $(".js-nh").index(this); var td = $('td'); $("#t1 tr").each(function() { if (td.hasClass('.js-national-holiday').length) { $(this).find('td').eq(hol).toggleClass('selected', flg); } else { $(this).find('td').eq(dow).toggleClass('selected', flg); } }); }).change(); ```
attercop

2016/10/12 23:53

返信が遅くなって申し訳ありません。 解決済とのことで不要でしょうが、除外するコードを追記しました。
guest

0

祝日に適当なclassを指定して、場合分けをすればよいのでは?
祝日を自動計算することは理論的に不可能です。
(祝日のロジックは定期的に変わるので)

追記

チェックボックスは条件が競合するのでボタンを使ったタイプを追記しておきます

javascript

1$(function(){ 2 var list={"mon":0,"tue":1,"wed":2,"thu":3,"fri":4,"sat":5,"sun":6}; 3 $('#t1 td').on('click',function(){ 4 $(this).toggleClass('selected'); 5 }); 6 $('.weekday').on('click',function(){ 7 var name=$(this).prop('name'); 8 var val=$(this).val(); 9 $('#t1 tr').each(function(){ 10 $(this).find('td').eq(list[name]).toggleClass('selected',val=='on'); 11 12 }); 13 }); 14 $('.js-dow').on('click',function(){ 15 var name=$(this).prop('name'); 16 var val=$(this).val(); 17 $('#t1 tr').each(function(){ 18 $(this).find('td').eq(list[name]).toggleClass('selected',val=='on'); 19 20 }); 21 }); 22 $('[name="js-nh"]').on('click',function(){ 23 var val=$(this).val(); 24 $('#t1 td.js-national-holiday').toggleClass('selected',val=='on'); 25 }); 26 $('[name="js-holidays"]').on('click',function(){ 27 var val=$(this).val(); 28 $('#t1 td.js-national-holiday').toggleClass('selected',val=='on'); 29 $('#t1 tr').each(function(){ 30 $($(this).find('td').slice(5,7)).toggleClass('selected',val=='on'); 31 }); 32 }); 33 $('[name="js-weekdays"]').on('click',function(){ 34 var val=$(this).val(); 35 $('#t1 tr').each(function(){ 36 $(this).find('td').slice(0,5).not('.js-national-holiday').toggleClass('selected',val=='on'); 37 }); 38 }); 39});

HTML

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

追記2

javascript

1$(function(){ 2 $('#t1 tr').each(function(){ 3 var td=$(this).find('td'); 4 td.on('click',function(){ 5 $(this).toggleClass('selected'); 6 if($(this).not('.selected').length==1){ 7 $('.js-dow').eq(td.index(this)).prop('checked',false); 8 $('#selectWeekdays').prop('checked',false); 9 } 10 }); 11 }); 12 $('.js-dow').on('change',function(){ 13 var num=$('.js-dow').index(this); 14 var flg=$(this).prop('checked'); 15 $('#t1 tr').each(function(){ 16 $(this).find('td').eq(num).toggleClass('selected',flg); 17 }); 18 }); 19 $('#js-nh').on('change',function(){ 20 var flg=$(this).prop('checked'); 21 $('#t1 td.js-national-holiday').toggleClass('selected',flg); 22 }).change(); 23 $('#selectHolidays').on('change',function(){ 24 var flg=$(this).prop('checked'); 25 $('#t1 td.js-national-holiday').toggleClass('selected',flg); 26 $('#t1 tr').each(function(){ 27 $(this).find('td').slice(5,7).toggleClass('selected',flg); 28 }); 29 $('.js-holiday').prop('checked',flg); 30 }).change(); 31 $('#selectWeekdays').on('change',function(){ 32 var flg=$(this).prop('checked'); 33 $('#t1 tr').each(function(){ 34 $(this).find('td').slice(0,5).not('.js-national-holiday').toggleClass('selected',flg); 35 }); 36 $('.js-weekday').prop('checked',flg); 37 }).change(); 38}); 39

HTML

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

投稿2016/10/11 12:40

編集2016/10/12 07:24
yambejp

総合スコア114505

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

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

hibikikudo

2016/10/12 02:34

ご回答いただきありがとうございます。 下記のように書いてみましたがまだうまくいきませんでした… (https://jsfiddle.net/gs2fbvmx/17/) ```javascript $(".js-dow").on("change", function() { var flg = $(this).prop('checked'); var dow = $(".js-dow").index(this); var hol = $(".js-nh").index(this); var td = $('td'); $("#t1 tr").each(function() { if (td.hasClass('.js-national-holiday').length) { $(this).find('td').eq(hol).toggleClass('selected', flg); } else { $(this).find('td').eq(dow).toggleClass('selected', flg); } }); }).change(); ```
yambejp

2016/10/12 03:41

今回のケースだと1日が祝日だという設定ですよね? ちょっとわからないのが、月曜にチェックして平日にチェックをすると 月曜日だど祝日な1日はどちらになるのかということ この手のダブルバインドされるものはチェックボックスでやると 条件が競合してきっちり仕様をきめないと処理ができません
hibikikudo

2016/10/12 03:45

コメントありがとうございます。おっしゃる通り1日が祝日です。 この場合月曜日かつ祝日の場合は祝日として扱いたいです。
yambejp

2016/10/12 04:06

ああ、ごめんなさい、祝日は問題ないですね 月曜と平日がチェックされていた場合、1日はどちらになるのでしょうか?
yambejp

2016/10/12 04:43

チェックボックスでやらずにボタンでやれば整合性が合いそうですね ちょっとあとで追記しておきます
hibikikudo

2016/10/12 05:43

ありがとうございます。 1日が1平日→月曜の順でチェックされた場合は、selected付与 1日が月曜→平日の順でチェックされた場合は、selected外れる がやりたい挙動です。
yambejp

2016/10/12 05:52

月曜→平日でチェックすると月曜のチェックも外れてよいのですね? また平日チェックをすると祝日を含むため月曜にはチェックを入れないのですね?
yambejp

2016/10/12 05:54

また火曜日をチェックして2日をクリックした場合火曜日のチェックは外れるのですね? (そのあたりが条件の競合になります)
hibikikudo

2016/10/12 06:01

> 月曜→平日でチェックすると月曜のチェックも外れてよいのですね? はい。 > また平日チェックをすると祝日を含むため月曜にはチェックを入れないのですね? いえ、ここは祝日を除いた月曜日にチェック入って欲しいです。
hibikikudo

2016/10/12 06:58

> また火曜日をチェックして2日をクリックした場合火曜日のチェックは外れるのですね? > (そのあたりが条件の競合になります) ここはどちらでも構いません。
yambejp

2016/10/12 07:24

追記2にておおよそ提示された仕様は盛り込みましたが、違っているようなら追加で指示ください
hibikikudo

2016/10/12 10:18

お手数をおかけしまして失礼しました。 こちらの話で恐縮ですが休日全選択からの平日全選択でのトグル処理、またその逆など追加要件があったこともあり、自己解決の回答にたどり着きました。 お付き合いいただきましてありがとうございました。
guest

0

自己解決

これでいけました。

javascript

1 /*---------------------------------------------------- 2 //カレンダー土日祝選択 3 ----------------------------------------------------*/ 4 var selectHolidays = $("#js-selectHolidays"); 5 selectHolidays.on('click', function () { 6 var checked = selectHolidays.is(':checked') 7 var td_span = $("#t1 td"); 8 $('.js-holiday, js-national-holidays').prop('checked', checked); 9 $("#t1 tr").each(function () { 10 for (var i = 0; i <= 6; i++) { 11 var td = $(this).find(td_span).eq(i); 12 if ((td.hasClass("national-holiday")) || (i == 0 || i == 6)) { 13 td.toggleClass("selected"); 14 } else { 15 td.removeClass("selected"); 16 } 17 } 18 }); 19 }); 20 /*---------------------------------------------------- 21 //カレンダー平日選択 22 ----------------------------------------------------*/ 23 var selectWeekdays = $("#js-selectWeekdays"); 24 selectWeekdays.on('click', function () { 25 var checked = selectWeekdays.is(':checked') 26 var td_span = $("#t1 td"); 27 $('.js-weekday').prop('checked', checked); 28 $("#t1 tr").each(function () { 29 for (var i = 0; i <= 6; i++) { 30 var td = $(this).find(td_span).eq(i); 31 if (td.hasClass("national-holiday")) { 32 td.removeClass("selected"); 33 } else { 34 td.toggleClass("selected"); 35 } 36 if (i == 0 || i == 6) { 37 td.removeClass("selected"); 38 } 39 } 40 }); 41 });

投稿2016/10/12 08:52

hibikikudo

総合スコア238

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問