勉強したことのメモ

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

  関連記事

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...