チェックボックス、ラジオボタンがチェックされているテーブルの行に背景色を入れたい

テーブル各行の左端に設置されたチェックボックス及びラジオボタンがチェックされている行背景に個別の色を入れたいと考えています。
【実現したいこと】
・各行に対してマウスオーバーした際に背景色を変更(実装済)
・チェックボックスは一番上に全選択/全解除ボタンを設置(実装済)
・チェックボックス、ラジオボタンをチェックした際に、その行に背景色を差し込む(未実装)

チェックボックスにチェックを入れた時に指定の親要素に「active」classをつければいいと思ったのですが、
残念ながら思ったような動作になりませんでした。

基本的なところなのかもしれないのですがまだjsに慣れておらず、お力添えをお願いいたします。

HTML
1<table class="c-table">
2  <thead>
3    <tr class="c-table__tr">
4      <th></th>
5      <th class="c-table__th">項目1</th>
6      <th class="c-table__th">項目2</th>
7      <th class="c-table__th">項目3</th>
8      <th class="c-table__th">項目4</th>
9    </tr>
10  </thead>
11  <tbody>
12    <tr class="c-table__tr">
13      <td class="c-table__input"><input type="radio" name="cr2" id="c4" value="" checked=""></td>
14      <td class="c-table__td">ああああああ</td>
15      <td class="c-table__td">いいいいいい</td>
16      <td class="c-table__td">うううううう</td>
17      <td class="c-table__td">ええええええ</td>
18    </tr>
19    <tr class="c-table__tr">
20      <td class="c-table__input"><input type="radio" name="cr2" id="c4" value="" checked=""></td>
21      <td class="c-table__td">ああああああ</td>
22      <td class="c-table__td">いいいいいい</td>
23      <td class="c-table__td">うううううう</td>
24      <td class="c-table__td">ええええええ</td>
25    </tr>
26  </tbody>
27</table>
28
29<table class="c-table">
30  <thead>
31    <tr class="c-table__tr">
32      <th><label class="allSelect" for="all"><input type="checkbox" name="allChecked" id="all"></label></th>
33      <th class="c-table__th">項目1</th>
34      <th class="c-table__th">項目2</th>
35      <th class="c-table__th">項目3</th>
36      <th class="c-table__th">項目4</th>
37    </tr>
38  </thead>
39  <tbody id="boxes">
40    <tr class="c-table__tr">
41      <td class="c-table__input"><input type="checkbox" name="chk[]" value=""></td>
42      <td class="c-table__td">ああああああ</td>
43      <td class="c-table__td">いいいいいい</td>
44      <td class="c-table__td">うううううう</td>
45      <td class="c-table__td">ええええええ</td>
46    </tr>
47    <tr class="c-table__tr">
48      <td class="c-table__input"><input type="checkbox" name="chk[]" value=""></td>
49      <td class="c-table__td">ああああああ</td>
50      <td class="c-table__td">いいいいいい</td>
51      <td class="c-table__td">うううううう</td>
52      <td class="c-table__td">ええええええ</td>
53    </tr>
54    <tr class="c-table__tr">
55      <td class="c-table__input"><input type="checkbox" name="chk[]" value=""></td>
56      <td class="c-table__td">ああああああ</td>
57      <td class="c-table__td">いいいいいい</td>
58      <td class="c-table__td">うううううう</td>
59      <td class="c-table__td">ええええええ</td>
60    </tr>
61  </tbody>
62</table>

css
1.c-table {
2  border-collapse:collapse;
3  margin-bottom: 15px;
4  position: relative;
5  width: 100%;
6}
7.c-table__th {
8  background-color: #333;
9  border-right: 1px solid #fff;
10  color: #fff;
11  font-size: 13px;
12  padding: 6px;
13  position: relative;
14  text-align: center;
15  white-space: nowrap
16}
17.c-table tbody .c-table__tr.active {
18  background-color: #86CBE0;
19}
20.c-table tbody .c-table__tr.active .c-table__input {
21  background-color: #fff;
22}
23.c-table tbody .c-table__tr:hover {
24  background-color: #86CBE0;
25}
26.c-table tbody .c-table__tr:hover .c-table__input {
27  background-color: #fff;
28}
29.c-table__td {
30  border: 1px solid #333;
31  font-size: 13px;
32  height: 32px;
33  padding: 6px;
34  word-break: break-all;
35}
36.c-table__input {
37  text-align: center;
38  width: 25px;
39}
40.c-table__input input[type=checkbox] {
41  opacity: 1;
42  width: 20px;
43  height: 20px;
44}
45.c-table__input input[type=checkbox]:checked + .c-table__td {
46  background-color: #86CBE0;
47}
48.c-table__input input[type=checkbox]:checked + .c-table__td {
49  background-color: #86CBE0;
50}
51.c-table__input:has(> input[type=checkbox]:checked) .c-table__td {
52  background-color: #86CBE0;
53}

js
1$(function() {
2    // 「全選択」する
3    $('#all').on('click', function() {
4      $("input[name='chk[]']").prop('checked', this.checked);
5    });
6
7    // 「全選択」以外のチェックボックスがクリックされたら、
8    $("input[name='chk[]']").on('click', function() {
9      if ($('#boxes :checked').length == $('#boxes :input').length) {
10        // 全てのチェックボックスにチェックが入っていたら、「全選択」 = checked
11        $('#all').prop('checked', true);
12      } else {
13        // 1つでもチェックが入っていたら、「全選択」 = checked
14        $('#all').prop('checked', false);
15      }
16    });
17  });
18$(function() {
19  $("input[type=checkbox]:checked").parents('c-table__tr').addClass('active');
20});

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

回答2件

JavaScript
1$(function () {
2  // // ラジオボタンがクリックされたら
3  $("input[name='cr2']").on("click", function() {
4    $("input[name='cr2']").each(function() {
5      $(this).closest(".c-table__tr").toggleClass("active", this.checked);
6    }) 
7  });
8  
9  // 「全選択」する
10  $("#all").on("click", function () {
11    $("input[name='chk[]']").prop("checked", this.checked).closest(".c-table__tr").toggleClass("active", this.checked);
12  });
13
14  // 「全選択」以外のチェックボックスがクリックされたら、
15  $("input[name='chk[]']").on("click", function () {
16    // チェックボックスが全て選択されていれば「全選択」のチェックを入れる
17    // それ以外は、「全選択」のチェックをはずす
18    $("#all").prop("checked", $("#boxes :checked").length == $("#boxes :input").length);
19    $(this).closest(".c-table__tr").toggleClass("active");
20  });
21});

投稿2020/08/24 01:52

編集2020/08/24 02:04

root_jp

総合スコア4666

Master0121

2020/08/24 05:24

早急な回答誠にありがとうございました。ラジオボタンのページにyambejpさん、チェックボックスのページにroot_jpさんご提示のスクリプトをそれぞれ組み込むことで意図していた動作を実現することができました。ベストアンサーはおひとつしか選択できないので、先にご回答頂きましたyambejpさんに贈らせていただきます。お二方とも、本当にありがとうございました。

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

ベストアンサー

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll('[type=radio]').forEach(x=>{
3    x.addEventListener('change',e=>{
4      x.closest('table').querySelectorAll('tr').forEach(y=>y.classList.remove('active'));
5      x.closest('tr').classList.toggle('active',x.checked);
6    });
7  });
8});