テーブル内チェックボックスのクリック範囲拡大方法

イメージ

このようなイメージのサンプルを作成してみたので、共有したいなと思います。

ポイント

td要素をクリックしたときにcheckboxをクリックするjsイベントを作成
バブリングを防止

サンプルコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
        .pointer, #test_1, #test_2 {
            cursor: pointer;
        }
    </style>
    <title>click test</title>
  </head>
  <body>
    <table border="1">
        <tr>
            <th width='200px'></th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr class='box'>
            <td class='pointer'><input type="checkbox" id="test_1"></td>
            <td>田中</td>
            <td>27</td>
        </tr>
        <tr class='box'>
            <td class='pointer'><input type="checkbox" id="test_2"></td>
            <td>佐藤</td>
            <td>42</td>
        </tr>
    </table>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        // チェックボックスを含む td 要素をクリックしたときに、チェックボックスをクリック
        $('td:has(input[type=checkbox])').on('click', function(e){
            $(this).find('input[type=checkbox]').click();
        });
        // バブリングを防止
        $('td input[type=checkbox]').on('click', function(e){
            e.stopPropagation();
        });

      </script>
  </body>
</html>

参考

tableのtdにあるcheckboxのON/OFF制御
- https://gist.github.com/ikolabo/909c00882cd30c487602
Stackoverflow（チェックボックスのスタイル作成）
- https://stackoverflow.com/questions/39958290/styling-a-checkbox-without-the-label-tag/39959161

会社紹介

株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。

詳しくは公式サイトまでお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/