JavaScript でチェックされたチェックボックスの値を取得する

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript でチェックされたチェックボックスの値を取得する
Shiv Yadav 2023年10月12日
JavaScript JavaScript Checkbox
  1. JavaScript でチェックボックスがチェックされているかどうかを検査する
  2. チェックボックス値の取得
  3. JavaScript で querySelectorAll() を使用して複数の選択されたチェックボックスの値を取得する
  4. JavaScript で getElementById() メソッドを使用して複数の選択された Chechbox の値を取得する
JavaScript でチェックされたチェックボックスの値を取得する

この記事は、JavaScript を使用して、チェックボックスがチェックされているかどうかを確認し、チェックされているチェックボックスの値を取得し、すべてのチェックボックスを選択/選択解除するのに役立ちます。

JavaScript でチェックボックスがチェックされているかどうかを検査する

チェックボックスには、チェックされている状態とチェックされていない状態の 2つの状態があります。

これらの手順に従って、チェックボックスの状態を判別できます。

  • まず、getElementById() や querySelector() などの DOM テクニックを使用してチェックボックスを選択します。
  • 次に、checkbox 要素の checked プロパティに移動します。チェックされたプロパティが実際のものである場合、チェックボックスがオンになります。そうでなければ、そうではありません。

次のコードは、querySelector() メソッドでこれを示しています。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="submit">
        <input type="checkbox" id="submit" name="submit" value="yes"> Submit
    </label>

    <script>
        const js = document.querySelector('#submit');
        console.log(js.checked); 
    </script>

</body>
</html>

この例では、

まず、Html チェックボックス要素を作成できます。

<label for="submit">
   <input type="checkbox" id="submit" name="submit" value="yes"> Submit 
</label>

次に、チェックボックスのチェックされた属性を id #submit で調べます。

const js = document.querySelector('#submit');
console.log(js.checked);

チェックボックスがオフになっているため、コンソールに表示される結果は false になります。

false

チェックボックスをオンにすると、コンソールに true と表示されます。

例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="submit">
        <input type="checkbox" id="submit" name="submit" value="yes" checked> Submit
    </label>

    <script>
        const js = document.querySelector('#submit');
        console.log(js.checked); 
    </script>

</body>
</html>

コンソールに出力が true として表示されます。

true

チェックボックス値の取得

チェックボックスと button は次のページにあります。ボタンをクリックすると、チェックボックスの値がコンソールウィンドウに表示されます。

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

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

<body>
    <label for="payment">
        <input type="checkbox" id="payment" name="payment"> Payment
    </label>

    <button id="bt">Submit</button>
    <script>
        const js = document.querySelector('#payment');
        const bt = document.querySelector('#bt');
        bt.onclick = () => {
           alert(js.value);
        };
    </script>
</body>
</html>

チェックボックスが選択されているかどうかに関係なく、チェックボックスの value プロパティを取得すると、常に on 文字列が取得されます。

JavaScript で querySelectorAll() を使用して複数の選択されたチェックボックスの値を取得する

次のページに 3つのチェックボックスがあります。1つまたは複数のチェックボックスを選択してボタンを押すと、選択したチェックボックスの値が表示されます。

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

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

<body>
    <p>Select your favorite subject:</p>
    <label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
    <label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
    <label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>
    <p>
        <button id="bt">Get Selected subject</button>
    </p>

    <script>
        const bt = document.querySelector('#bt');
        bt.addEventListener('click', (event) => {
            let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
            let output = [];
            checkboxes.forEach((checkbox) => {
                output.push(checkbox.value);
            });
            alert(output);
        });    
    </script>
</body>
</html>

以下はそれがどのように機能するかです。

同じ名前（色）で値が異なる 3つのチェックボックス要素を HTML で作成します。

<label for="s1"> <input type="checkbox" name="subject" value="Math" id="s1">Math</label>
<label for="s2"><input type="checkbox" name="subject" value="Science" id="s2">Science</label>
<label for="s3"><input type="checkbox" name="subject" value="Health" id="s3">Health</label>

JavaScript の場合：

  • 開始するには、ボタンのクリックイベントハンドラーに以下を追加します。
  • 次に、ドキュメントを使用して、指定したチェックボックスを選択します。クリックイベントハンドラー内で、querySelectorAll()メソッドを使用します。
  • 3 番目に、選択したチェックボックスの値を使用して配列を作成します。
const bt = document.querySelector('#bt');
bt.addEventListener('click', (event) => {
  let checkboxes = document.querySelectorAll('input[name="subject"]:checked');
  let output = [];
  checkboxes.forEach((checkbox) => {
    output.push(checkbox.value);
  });
  alert(output);
});

JavaScript で getElementById() メソッドを使用して複数の選択された Chechbox の値を取得する

次に、getElementById() メソッドを使用してユーザーのすべてのチェックボックス値を取得する方法を学習します。以下の例を見てください。

<html>
<body>

<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td> 
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> <tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>  

<script>
function checkAll() {
        var inputs = document.querySelectorAll('.ss'); 
        for (var k = 0; k < inputs.length; k++) {
            inputs[k].checked = true; 
        } 
}
function getCheckboxValue() {

  var sub1 = document.getElementById("s1");
  var sub2 = document.getElementById("s2");
  var sub3 = document.getElementById("s3");
  var sub4 = document.getElementById("s4");
  var sub5 = document.getElementById("s5");
  var sub6 = document.getElementById("s6");
   
  var result=" "; 
  if (sub1.checked == true){
    var ss1 = document.getElementById("s1").value;
    result = ss1 + ","; 
  } 
  else if (sub2.checked == true){
    var ss2 = document.getElementById("s2").value;
    result = result + ss2 + ","; 
  }
  else if (sub3.checked == true){
  document.write(result);
    var ss3 = document.getElementById("s3").value;
    result = result + ss3 + ","; 
  }
  else if (sub4.checked == true){
    var ss4 = document.getElementById("s4").value;
    result = result + ss4 + ","; 
  }
  else if (sub5.checked == true){
    var ss5 = document.getElementById("s5").value;
    result = result + ss5 + ","; 
  }
  else if (sub6.checked == true){
    var ss6 = document.getElementById("s6").value;
    result = result + ss6; 
  } else {
  return document.getElementById("result").innerHTML = "please,select any one";
  }
  return document.getElementById("result").innerHTML = "You have selected " + result + " subjects";
}
</script>

</body>
</html>

出力：

このコードを実行することにより、以下のような応答が得られます。ここでは、よく知っている主題を選択できます。

デモ

著者： Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

関連記事 - JavaScript Checkbox