勉強したことのメモ

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.browser is undefined」エラーの対応方法

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

タブアンダー広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...