配列を用いカレンダーのチェックボックスを制御する

###前提・実現したいこと
「曜日」と書かれたチェックボックスチェックをすると、その曜日のすべての日が選択されるカレンダーを作りました。
動くサンプル
逆にクリックで、セルを一つ一つ選択して、月曜日なら月曜日のセルをすべて選択すると、対応する曜日のチェックボックスにチェックを入れたい。
そして一つでも外れていれば、チェックを外したい。

###発生している問題・エラーメッセージ

javascript
1cell.on('change', function () {
2		$("tr").each(function () {
3			for (var i = 0; i <= 6; i++) {
4...省略...

といった感じで配列を使って実現しようとトライしていますが、うまい方法が思いつきません…。

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

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<table id="t1">
16  <tr>
17    <th class="js-dow">mon</th>
18    <th class="js-dow">tue</th>
19    <th class="js-dow">wed</th>
20    <th class="js-dow">thu</th>
21    <th class="js-dow">fri</th>
22    <th class="js-dow">sat</th>
23    <th class="js-dow">sun</th>
24  </tr>
25  <tr>
26    <td>1</td>
27    <td>2</td>
28    <td>3</td>
29    <td>4</td>
30    <td>5</td>
31    <td>6</td>
32    <td>7</td>
33  </tr>
34  <tr>
35    <td>8</td>
36    <td>9</td>
37    <td>10</td>
38    <td>11</td>
39    <td>12</td>
40    <td>13</td>
41    <td>14</td>
42  </tr>
43  <tr>
44    <td>15</td>
45    <td>16</td>
46    <td>17</td>
47    <td>18</td>
48    <td>19</td>
49    <td>20</td>
50    <td>21</td>
51  </tr>
52  <tr>
53    <td>22</td>
54    <td>23</td>
55    <td>24</td>
56    <td>25</td>
57    <td>26</td>
58    <td>27</td>
59    <td>28</td>
60  </tr>
61  <tr>
62    <td>29</td>
63    <td>30</td>
64    <td class="disabled">1</td>
65    <td class="disabled">2</td>
66    <td class="disabled">3</td>
67    <td class="disabled">4</td>
68    <td class="disabled">5</td>
69  </tr>
70</table>

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    var hol = $(".js-nh").index(this);
15    var td = $('td');
16    $("#t1 tr").each(function() {
17      if (!td.hasClass('.js-national-holiday').length) {
18        $(this).find('td').eq(dow).toggleClass('selected', flg);
19      }
20    });
21  }).change();
22
23});

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

行動規範の内容に同意します

回答2件

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6
7		<style type="text/css">
8			#calendar table {
9				border-collapse: collapse;
10			}
11			#calendar thead th,
12			#calendar tbody td {
13				border: 1px solid #CCC;
14				padding: 0.25em 0.5em;
15			}
16			#calendar tbody td {
17				text-align: center;
18			}
19			#calendar tbody td.Sun {
20				background: #FEE;
21			}
22			#calendar tbody td.Sat {
23				background: #EEF;
24			}
25			#calendar tbody td.selected {
26				font-weight: bold;
27				color: red;
28			}
29		</style>
30	</head>
31	<body>
32		<div id="calendar"></div>
33		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
34		<script type="text/javascript" src="calendar.js"></script>
35		<script type="text/javascript">
36			$(function () {
37				$("#calendar").calendar();
38			});
39		</script>
40	</body>
41</html>

javascript
1(function ($) {
2
3	$.fn.calendar = function (options) {
4
5		var today = new Date();
6		var m = today.getMonth();
7		var y = today.getFullYear();
8
9		var settings = $.extend({
10			'lang': 'ja',
11			'selectedColor': '#66F',
12			'week': [
13				'日', '月', '火', '水', '木', '金', '土'
14			],
15			'weekClass': [
16				'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
17			],
18			'year': y,
19			'month': m,
20			'activaClass': 'active'
21		}, options);
22
23		var weekOfFirstDay = new Date(settings.year, settings.month, 1);
24		var offset = weekOfFirstDay.getDay();
25		var start = weekOfFirstDay;
26		start.setDate(start.getDate() - offset);
27
28		return this.each(function () {
29			var table = $('<table>');
30
31			var thead = $('<thead>');
32			thead.append($('<tr>'));
33			thead.find('tr')
34					.append($('<th>').html($('<a>').text('<')))
35					.append($('<th>')
36							.text(settings.year + '/' + (settings.month + 1))
37							.attr('colspan', 5))
38					.append($('<th>').html($('<a>').text('>')));
39
40			thead.append($('<tr>'));
41			for (var i in settings.week) {
42				thead.find('tr:last')
43						.append($('<th>').text(settings.week[i]));
44			}
45			thead.append($('<tr>'));
46			for (var i in settings.week) {
47				thead.find('tr:last')
48						.append($('<th>').append(
49								$('<input>').prop({'type': 'checkbox'})
50								.val(settings.weekClass[i])
51								));
52			}
53			thead.appendTo(table);
54
55			var tbody = $('<tbody>');
56			tbody.appendTo(table);
57
58			while (1 + settings.month !== start.getMonth() || start.getDay() !== 0) {
59				if (start.getDay() === 0) {
60					tbody.append($('<tr>'));
61				}
62
63				$('<td>').text(start.getDate())
64						.addClass(settings.weekClass[start.getDay()])
65						.appendTo(tbody.find('tr:last'));
66
67				start.setDate(start.getDate() + 1);
68			}
69
70			$(this).html(table);
71
72			$('thead :checkbox').on('change', function () {
73				var cls = $(this).val();
74				if ($(this).prop('checked')) {
75					$('tbody td.' + cls).addClass('selected');
76				} else {
77					$('tbody td.' + cls).removeClass('selected');
78				}
79			});
80
81			$('tbody td').on('click', function () {
82				$(this).toggleClass('selected');
83				for (var i in settings.weekClass) {
84					if ($(this).hasClass(settings.weekClass[i])) {
85						var yobi = settings.weekClass[i];
86					}
87				}
88				var checked = ($('tbody td.' + yobi + ':not(.selected)').length > 0) ? false : true;
89				$('thead :checkbox[value=' + yobi + ']').prop('checked', checked);
90			});
91		});
92
93	};
94})(jQuery);

投稿2016/10/21 07:57

退会済みユーザー

総合スコア0

ベストアンサー

こんな感じでしょうか

javascript
1$(function() {
2  $('.js-dow').on('change',function(){
3    var dow=$('.js-dow').index(this);
4    var flg=$(this).prop('checked');
5    $('table#t1 tr').each(function(){
6      $(this).find('td').eq(dow).toggleClass('selected',flg);
7    });
8  }).change();
9  $('table#t1 td').on('click',function(){
10    $(this).toggleClass('selected');
11    var dow=$(this).parents('tr').first().find('td').index(this);
12    $('.js-dow').eq(dow).prop('checked',true);
13    $('table#t1 tr').each(function(){
14      if($(this).find('td').length>0 && !$(this).find('td').eq(dow).hasClass('selected')){
15        $('.js-dow').eq(dow).prop('checked',false);
16      }
17    });
18  });
19});