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

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

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

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

jQuery

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

Q&A

解決済

2回答

2608閲覧

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

Master0121

総合スコア18

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/08/24 01:23

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

チェックボックスにチェックを入れた時に指定の親要素に「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});

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

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

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

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

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

guest

回答2

0

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さんに贈らせていただきます。 お二方とも、本当にありがとうございました。
guest

0

ベストアンサー

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});

投稿2020/08/24 01:40

yambejp

総合スコア114505

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

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

Master0121

2020/08/24 05:23

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問