背景
tableにチェックボックスを仕掛けて、行を押したら反応するようにしたい。
しかし、ググっても「jQueryを使った...」ばかりでした。
jQueryは使いたくなかったので純粋なJavaScript(Vanilla.js)で実装してみました。ご査収ください。
コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Table Sample</title>
</head>
<body>
<table>
<th>checkbox</th>
<th>氏名</th>
<th>性別</th>
<tr onclick="trClick(0)">
<td><input id="chkbox0" type="checkbox"/></td>
<td>あいう えお</td>
<td>男</td>
</tr>
<tr onclick="trClick(1)">
<td><input id="chkbox1" type="checkbox"/></td>
<td>かきく けこ</td>
<td>女</td>
</tr>
</table>
<script>
const trClick = (num) => {
document.getElementById("chkbox"+num).checked ^= 1;
};
</script>
</body>
</html>
checkboxのidナンバーとtrClickの引数の値で引っ掛けてみました。
もっと素敵な書き方がありそうな気がしますが、自分の知識ではこれが限界...
アイディアがある方はぜひコメントなどでご教授ください！