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/
関連記事
-
-
tableのフィルター機能
jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...
-
-
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...
-
-
jQueryで後から追加された要素にイベントを設定
jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...
-
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...