tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでcheckboxにチェックを入れたい。つまり「checkboxのクリック可能範囲=親要素のtd部分全て」としたい。さらにチェック状況により親要素のtdに対してCSSを割り当てたい。以下にソースコードとサンプルをメモ。
サンプル
https://taitan916.info/sample/table_td_checkbox/
上記サンプルページに3列tableタグがあり以下の通り挙動が異なる。
- 通常版 → チェックボックスのクリック可能範囲はチェックボックス部分のみ
- クリック範囲拡大版 → チェックボックスのクリック可能範囲は親要素のtd部分全て
- クリック範囲拡大&tdタグにCSS追加版 → チェックボックスのクリック可能範囲は親要素のtd部分全て、尚且つチェックの有無で親要素のtdのCSSが切り替わり背景色が変わる
ソースコード
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tableのtdタグ内にあるcheckboxのクリック範囲を拡大させるサンプル</title> <style> td{ border: 1px solid #ccc; height: 100px; width: 100px; } .wide td{ cursor: pointer; } .td_color td:has(input:checked){ background-color: #87ceeb; } </style> </head> <body> <div>通常版</div> <table class="normal"> <tr> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> </tr> </table><br> <div>クリック範囲拡大版</div> <table class="wide"> <tr> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> </tr> </table><br> <div>クリック範囲拡大&tdタグにCSS追加版</div> <table class="wide td_color"> <tr> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> <td> <input type="checkbox"> </td> </tr> </table> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $('.wide td:has(input[type=checkbox])').on('click', function(){ $(this).find('input[type=checkbox]').click(); }); $('td input[type=checkbox]').on('click', function(event){ event.stopPropagation(); }); </script> </body> </html>
解説等
CSSの:has()
「.td_color td:has(input:checked)」部分は以前に書いた親要素を指定する疑似クラスとなる。つまりcheckedがついている親要素の「.td_color > tdタグ」に対してCSSを割り当てることができる。
event.stopPropagation()
バブリング対策となり「event.stopPropagation()」を指定していないと「tdクリック → checkboxクリック → tdクリック……」と無限ループになる。
尚、バブリングについてはこちらのサイトが参考になった。
参考サイト
https://renandpenta.com/css-has/
関連記事
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...
-
-
FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...
-
-
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...