この記事で書くこと
- ラジオボタンみたいに複数のボタン（button）を１つだけ選択している状態にする
ポイント
- 画面を表示した際にボタンに対し 「ボタンをクリックした際に発火する関数」 を設定する
- 任意のボタンをクリックした際に、一旦全てのボタンの 属性
data-pushedの値をfalseにする - クリックしたボタンの属性
data-pushedの値をtrueに変更する
コード
Sample.html
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
div {
position: relative;
top: 100px;
left: 20px;
}
button {
width: 200px;
height: 50px;
border: 2px solid gray;
border-radius: 5px;
}
button[data-pushed="true"] {
background-color: gray;
color: white;
}
button[data-pushed="false"] {
background-color: white;
color: gray;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",() => {
let buttons = document.querySelectorAll("button");
buttons.forEach((button) => {
button.setAttribute('onclick','push(this)');
})
});
const push = (object) => {
let that = object;
let buttons = document.querySelectorAll("button");
buttons.forEach(button => {
button.dataset.pushed = "false";
})
document.getElementById(that.id).dataset.pushed = "true";
}
</script>
</head>
<body>
<hedaer></hedaer>
<div>
<button id="buttonA" data-pushed="true">A</button>
<button id="buttonB" data-pushed="false">B</button>
<button id="buttonC" data-pushed="false">C</button>
</div>
<footer></footer>
</body>
</html>
実行結果
ブラウザに表示した時の HTML コード
ボタン B をクリックした際の HTML コード
ボタン C をクリックした際の HTML コード
ボタンを追加する時
- ボタンを１つ追加する場合は、下記コードを１行追加すれば良い
- ボタンの増加・減少に伴う JavaScript コードの編集が発生しない
-
idは既存のボタンと重複しないようにする
追加するコード
<button id="buttonD" data-pushed="false">D</button>
例
<button id="buttonA" data-pushed="true">A</button>
<button id="buttonB" data-pushed="false">B</button>
<button id="buttonC" data-pushed="false">C</button>
+ <button id="buttonD" data-pushed="false">D</button>
ボタン D を追加した際の HTML コード
ボタン D をクリックした際の HTML コード
