セルをまたぐチェックボックスのラベル

質問

□文字　|　文字　|　文字
※□はチェックボックス
のように１行に複数セルがあるラベルの設定方法がわからず困っています。やりたいことは

1、１行の中のどのセルや文字をマウスオーバーしても１行ごと背景の色を変える

2、１行の中のどのセルや文字をクリックしてもチェックボックスにチェックが入る

の２つです。
多少ならJQuery等もわかるのですがどのような実現方法がありますでしょうか。
よろしくお願いします。

回答No.2

retorofan · ベストアンサー

やりたいことに関して、ラベルは必須ではないでしょう。
TH,TDなどのテーブルセルにおいて、セルをまたぐチェックボックスのラベルは使えません。
作表において、DIV,SPAN等のグリッドセルなら、セルをまたぐチェックボックスのラベルが使えます。

やりたいことに限っていえば、セルをまたぐチェックボックスのラベルは
考えなくても実現できます。
そのサンプルソースをお確かめください。

<form name="form4">
<table id="table4" border="1">
<thead>
<tr>
<th></th><th>A列目</th><th>B列目</th><th>C列目</th>
</tr>
</thead>
<tbody>
<tr>
<td><label><input type="checkbox" name="ccbx">1行目</label></td>
<td>文字1A</td><td>文字1B</td><td>文字1C</td>
</tr>
<tr>
<td><label><input type="checkbox" name="ccbx">2行目</label></td>
<td>文字2A</td><td>文字2B</td><td>文字2C</td>
</tr>
<tr>
<td><label><input type="checkbox" name="ccbx">3行目</label></td>
<td>文字3A</td><td>文字3B</td><td>文字3C</td>
</tr>
</tbody>
</table>

<p>
<input type="reset" value="RESET">
</p>

</form>

<script>
// エレメント
const checkbox = document.form4.ccbx;
const tbody = document.querySelector("#table4 tbody");
const trs = tbody.querySelectorAll("tr");

// ホバー時
trs.forEach(function(element, index){
element.onmouseover = function(){
this.style.backgroundColor = "#ff0";
};
element.onmouseout = function(){
this.style.backgroundColor = "";
};

});

// クリック時
tbody.onclick = ()=> {
let target = event.target;
let n = target.parentNode.rowIndex - 1;

if (target.tagName === "TD") {
checkbox[n].checked = checkbox[n].checked ? false: true;
}
};
</script>

回答No.1

luka3

1についてはこちらを参考にしてください。

・マウスオーバー時にTABLEの行の背景色を変えるCSSの書き方
https://dev-lib.com/table-mouseover-background-color-css/

2は、LABELタグのfor属性でチェックボックスのIDを指定することで実現できます。

・labelタグの使い方
https://catnose.me/learning/html/label