ホーム » JavaScript DOM » JavaScript ラジオボタン

JavaScript ラジオボタン

概要：このチュートリアルでは、JavaScriptを使用してラジオグループ内のどのラジオボタンがチェックされているかを確認する方法を学びます。

JavaScript ラジオボタンの概要

ラジオボタンを使用すると、相互に排他的な事前定義されたオプションのセットから1つだけを選択できます。ラジオボタンを作成するには、typeがradioの<input>要素を使用します。ラジオボタンのグループをラジオグループと呼びます。

ラジオグループを形成するには、すべてのラジオボタンに共通の名前を使用します。例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
</body>
</html>Code language: HTML, XML (xml)

この例では、すべてのラジオボタンに同じ名前「size」がありますが、値は異なります。このため、一度に1つのラジオボタンしか選択できません。

選択されたラジオボタンを見つけるには、次の手順に従います。

  • querySelectorAll()メソッドなどのDOMメソッドを使用して、すべてのラジオボタンを選択します。
  • ラジオボタンのcheckedプロパティを取得します。checkedプロパティがtrueの場合、ラジオボタンはチェックされています。それ以外の場合は、チェックされていません。

どのラジオボタンがチェックされているかを知るには、value属性を使用します。例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>
<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
    <p>
        <button id="btn">Show Selected Value</button>
    </p>

    <p id="output"></p>

    <script>
        const btn = document.querySelector('#btn');        
        const radioButtons = document.querySelectorAll('input[name="size"]');
        btn.addEventListener("click", () => {
            let selectedSize;
            for (const radioButton of radioButtons) {
                if (radioButton.checked) {
                    selectedSize = radioButton.value;
                    break;
                }
            }
            // show the output:
            output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

仕組み。

まず、#btn idを持つボタン、#output idを持つ出力要素、および名前がsizeのすべてのラジオボタンを選択します。

const btn = document.querySelector('#btn');
const output = document.querySelector('#output');

const radioButtons = document.querySelectorAll('input[name="size"]');
Code language: JavaScript (javascript)

次に、ボタン要素にクリックイベントリスナーを登録します。

btn.addEventListener('click', () => {
});Code language: PHP (php)

3番目に、ラジオボタンを反復処理し、選択したラジオボタンの値を取得します。

let selectedSize;
for (const radioButton of radioButtons) {
  if (radioButton.checked) {
    selectedSize = radioButton.value;
    break;
  }
}Code language: JavaScript (javascript)

ラジオボタンがチェックされている場合、そのcheckedプロパティはtrueです。次に、選択したラジオボタンのvalueをselectedSize変数に代入します。

ラジオグループ内で一度にチェックできるラジオボタンは1つだけであるため、ループはbreakステートメントによってすぐに終了します。

最後に、出力要素のメッセージを設定します。

 output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;Code language: JavaScript (javascript)

ラジオボタンのchangeイベント

ラジオボタンをチェックまたはチェック解除すると、changeイベントが発生します。changeイベントをリッスンするには、次のようにaddEventListener()メソッドを使用します。

radioButton.addEventListener('change',function(e){
    
});Code language: JavaScript (javascript)

changeイベントハンドラー内では、thisキーワードにアクセスしてラジオボタンにアクセスできます。ラジオボタンがチェックされているかどうかを確認するには、checkedプロパティを使用できます。

if(this.checked) {
  // 
}Code language: JavaScript (javascript)

チェックされたボタンの値を取得するには、valueプロパティを使用します。

if(this.checked) {
    console.log(this.value);
}Code language: JavaScript (javascript)

このようになります。

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});Code language: JavaScript (javascript)

次の例では、ラジオグループを動的に生成し、ラジオボタンがチェックされたときに選択した値を表示します。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div id="group">
    </div>

    <p id="output"></p>

    <script>
        const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];

        // generate the radio groups        
        const group = document.querySelector("#group");
        group.innerHTML = sizes.map((size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`).join(' ');
        
        // add an event listener for the change event
        const radioButtons = document.querySelectorAll('input[name="size"]');
        for(const radioButton of radioButtons){
            radioButton.addEventListener('change', showSelected);
        }        
        
        function showSelected(e) {
            console.log(e);
            if (this.checked) {
                document.querySelector('#output').innerText = `You selected ${this.value}`;
            }
        }
    </script>
</body>

</html>Code language: HTML, XML (xml)

仕組み。

まず、サイズを保持する文字列の配列を定義します。実際には、これらの値はバックエンドのデータベースまたはAPI呼び出しの結果から取得できます。

const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];Code language: JavaScript (javascript)

次に、サイズ配列の要素からラジオグループを生成します。

const group = document.querySelector('#group');
group.innerHTML = sizes
  .map(
    (size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`
  )
  .join(' ');
Code language: JavaScript (javascript)

このコードでは

1) id #groupを持つ要素を選択します。

2) テンプレートリテラルを使用してmap()メソッドを使用してラジオグループを生成します。各配列要素は、ラジオボタンのHTMLに対応します。

3) join()メソッドを使用して、ラジオボタンのHTML文字列をHTML文字列に結合します。

4) 出力要素のinnerHTMLにHTMLを代入します。

3番目に、名前が「size」のすべてのラジオボタンを選択し、changeイベントリスナーを追加します。

const radioButtons = document.querySelectorAll('input[name="size"]');
for (const radioButton of radioButtons) {
  radioButton.addEventListener('change', showSelected);
}Code language: JavaScript (javascript)

最後に、changeイベントハンドラーを定義します。

function showSelected(e) {
  if (this.checked) {
    document.querySelector('#output').innerText = `You selected ${this.value}`;
  }
}Code language: JavaScript (javascript)

概要

  • ラジオボタンを作成するには、typeがradioの<input>要素を使用します。
  • ラジオグループを形成するために、複数のラジオボタンに名前を割り当てます。グループ内で選択できるラジオボタンは1つだけです。
  • ラジオボタンが選択されている場合、そのcheckedプロパティはtrueです。
このチュートリアルは役に立ちましたか？
JavaScript Checkbox
前へ
JavaScript チェックボックス
次へ
JavaScript select 要素
JavaScript select Element