jquery tdクリックでその行の色変更とチェックボックス・ラジオボタンにチェック

tableタグで一覧表示して、各行にチェックボックス・ラジオボタンがあるときのチェックのon・off処理

作成日:2017-12-13, 更新日:2018-04-16

基本

・クリックされたらその行の色変更、チェックのon/off
・クリックされるのは「チェックボックス/ラジオボタン、labelタグ、対象行の前述以外の箇所」の3か所
・行の色はCSSで設定しておく(下記サンプルで「.clsZebra td」ってヤツ)

ラジオボタン

・クリックされた行のみ違う色にする(1行のみ違う色になる)

チェックボックス

・クリックされた行のすべて違う色にする(複数行が違う色になる)

HTMLとCSS部

<style>
  .clsZebra td { background-color:#ffffdd; }
</style>

</head>
<body>
  
  <table class="tblRadio">
    <tr><td><label><input type="radio" /> 1</label></td><td>鳥精</td></tr>
    <tr><td><label><input type="radio" /> 2</label></td><td>豚精</td></tr>
    <tr><td><label><input type="radio" /> 3</label></td><td>丸ごとシマウマ</td></tr>
    <tr><td><label><input type="radio" /> 4</label></td><td>ナンコツ</td></tr>
    <tr><td><label><input type="radio" /> 5</label></td><td>ねぎま</td></tr>
  </table>
  
  <table class="tblChk">
    <tr><td><label><input type="checkbox" /> 1</label></td><td>鳥精</td></tr>
    <tr><td><label><input type="checkbox" /> 2</label></td><td>豚精</td></tr>
    <tr><td><label><input type="checkbox" /> 3</label></td><td>丸ごとシマウマ</td></tr>
    <tr><td><label><input type="checkbox" /> 6</label></td><td>モチベーコン</td></tr>
    <tr><td><label><input type="checkbox" /> 7</label></td><td>ひな皮</td></tr>
    <tr><td><label><input type="checkbox" /> 9</label></td><td>砂肝</td></tr>
  </table>
</body>

script部

ラジオボタン

$('.tblRadio').on('click', 'td', function(e){
  var clsName = 'clsZebra';
  
  var tmpTr = $(this).parents('tr');
  if ( !tmpTr.hasClass(clsName) ) {
    // ひとまず全部、クリア
    $(tmpTr).parents('table').find('tr').removeClass(clsName);
    $(tmpTr).parents('table').find('tr input').prop('checked', false);
    
    // 対象行のみ処理
    $(tmpTr).addClass(clsName);
    $(tmpTr).find('input').prop('checked', true);
  }
});

チェックボックス

チェックボックスは、ちと面倒。伝播を止める必要あり。

$('.tblChk').on('click', 'td', function(e){
  if ( e.target.localName == 'input' ) {
    // 親への伝播ストップ
    e.stopPropagation();
  }
  else if ( e.target.localName == 'label' ) {
    // 自身のイベントストップ
    e.preventDefault();
  }
  
  var clsName = 'clsZebra';
  
  var tmpTr = $(this).parents('tr');
  
  if ( e.target.localName == 'td' || e.target.localName == 'label' ) {
    var tmpChk = $(tmpTr).find('input[type=checkbox]:checked').length;
    $(tmpTr).find('input[type=checkbox]').prop('checked', !tmpChk);
  }
  
  if ( !tmpTr.hasClass(clsName) ) {
    $(tmpTr).addClass(clsName);
  }
  else {
    $(tmpTr).removeClass(clsName);
  }
});

関連項目

jquery 複数のイベント設定で発火しない

サンプル

tdクリックでその行の色変更とチェックボックス・ラジオボタンにチェックのサンプル