ラボ > Javascript関連：form
jquery tdクリックでその行の色変更とチェックボックス・ラジオボタンにチェック
tableタグで一覧表示して、各行にチェックボックス・ラジオボタンがあるときのチェックのon・off処理
作成日:2017-12-13, 更新日:2018-04-16
基本
・クリックされたらその行の色変更、チェックのon/off
・クリックされるのは「チェックボックス/ラジオボタン、labelタグ、対象行の前述以外の箇所」の３か所
・行の色は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);
}
});