この記事で書くこと

ラジオボタンみたいに複数のボタン（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 コード