［HTML / CSS / JavaScript］ラジオボタンみたいに複数のボタン（button）を１つだけ選択している状態にする

## この記事で書くこと
- ラジオボタンみたいに複数のボタン（button）を１つだけ選択している状態にする

![スクリーンショット 2023-04-15 16.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/1751e447-b015-6786-c3fa-5635cf12dcd9.png)

![スクリーンショット 2023-04-15 16.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/671fc3fd-93c6-751f-3f2b-7bad7cff5c87.png)

![スクリーンショット 2023-04-15 16.35.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/21951ab7-56ba-f91d-40ef-2b1c167ec462.png)

## ポイント
- 画面を表示した際にボタンに対し　「ボタンをクリックした際に発火する関数」 を設定する
- 任意のボタンをクリックした際に、一旦全てのボタンの　属性 `data-pushed` の値を `false` にする
- クリックしたボタンの属性 `data-pushed` の値を `true` に変更する

## コード
```html: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 コード
![スクリーンショット 2023-04-15 16.38.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/ac03f20f-f728-2bff-e763-887198122847.png)

ボタン B をクリックした際の HTML コード
![スクリーンショット 2023-04-15 16.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/3f3abfc5-3c42-52d8-0b24-b83c79b5345f.png)

ボタン C をクリックした際の HTML コード
![スクリーンショット 2023-04-15 16.41.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/344ff24f-9a15-bdf8-9461-1a821217f6ac.png)


## ボタンを追加する時
- ボタンを１つ追加する場合は、下記コードを１行追加すれば良い
- ボタンの増加・減少に伴う JavaScript コードの編集が発生しない
- `id`は既存のボタンと重複しないようにする

```html:追加するコード
<button id="buttonD" data-pushed="false">D</button> 
```
```diff_HTML:例
<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 コード
![スクリーンショット 2023-04-15 16.42.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/08fab47a-6d28-1a6b-a635-3fb7feeb2564.png)

ボタン D をクリックした際の　HTML コード
![スクリーンショット 2023-04-15 16.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/e93bf372-5f3f-8dcb-a80e-0106c0dd6f14.png)