勉強したことのメモ

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

  関連記事

フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法

お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

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

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

jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法

jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...