勉強したことのメモ

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で指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

Ajaxを使用する際の注意

Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...

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

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

jQueryのdatetimepickerでスクロール入力を無効化させる方法

日時ピッカーのjQuery datetimepickerにて、ピッカーを指定して ...