勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

  jQuery JavaScript 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/

https://qiita.com/syukan3/items/7ccc9b18495695db119b

https://ja.javascript.info/bubbling-and-capturing

 - jQuery JavaScript CSS

  関連記事

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...