###前提・実現したいこと
曜日をクリックすると、その曜日のすべての日が選択されるカレンダーを作った。
動くサンプル
これを現在の機能を残したまま別のチェックボックスからも操作したいと考えたがうまく動かない。
うまくいかないサンプル
###発生している問題・エラーメッセージ
単純に同じクラスを振り分ける方法ではうまくいかない。
また、複数のチェックボックスを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});
何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/06 05:13