javascript ラジオボタンをチェック状態に変更する

作成日 2022.08.27
javascript
javascript

javascriptで、ラジオボタンをチェック状態に変更するサンプルコードを記述してます。

1. 環境
2. ラジオボタンをチェック状態に変更
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 104.0.5112.101

Javascript サンプル集はこちら

ラジオボタンをチェック状態に変更

ラジオボタンをチェック状態に変更するには、「ラジオボックス[位置].checked」を「true」にします。

<form name="frm">
    <input type="radio" name="foo" value="one" checked /> 1
    <input type="radio" name="foo" value="two" /> 2
    <input type="radio" name="foo" value="three" /> 3
</form>

<script>

function chk() {
    // 2つ目のラジオボックスを選択状態にします
    document.frm.foo[1].checked = true;
}

</script>

実行結果

ラジオボックスは、同時に複数チェックはできません。

function chk() { 
    document.frm.foo[1].checked = true;
    document.frm.foo[2].checked = true;
    document.frm.foo[0].checked = true;
}

実行すると最後に選択したものとなります。

サンプルコード

以下は、実行ボタンをクリックすると、順番にラジオボックスをチェックしていくサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge bg-success">選択を変更</span></h2>

    <form name="frm">
      <input type="radio" name="foo" value="one" class="form-check-input" /> 1
      <input type="radio" name="foo" value="two" class="form-check-input" /> 2
      <input type="radio" name="foo" value="three" class="form-check-input" /> 3
    </form>

    <button id="btn" class="btn btn-danger btn-rounded mt-2">実行</button>

  </div>

  <script>

    let count = 0

    btn.onclick = () => {

      document.frm.foo[count].checked = true;
      
      // 最大値を超えればcountを0に戻す
      (document.frm.foo.length == count + 1) ?  count = 0 : count++

    }

  </script>
</body>

</html>

取得されていることが確認できます。