ラボ > Javascript関連:form
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); } });