【これでわかる！】JavaScriptでチェックボックスを自在に操る：クリック、変更、複数選択も

2024-06-24

HTML チェックボックスの値を JavaScript で取得する方法

onclick イベントは、ユーザーがチェックボックスをクリックしたときに発生します。このイベントを使用して、チェックボックスの値を取得することができます。

<input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
<label for="myCheckbox">オプション 1</label>

<script>
  const checkbox = document.getElementById('myCheckbox');
  checkbox.onclick = function() {
    if (checkbox.checked) {
      console.log('チェックボックスが選択されました。値:', checkbox.value);
    } else {
      console.log('チェックボックスが選択解除されました。');
    }
  };
</script>

上記の例では、checkbox.checked プロパティを使用して、チェックボックスが選択されているかどうかを確認しています。選択されている場合は、checkbox.value プロパティを使用して値を取得しています。

onchange イベントは、ユーザーがチェックボックスの選択状態を変更したときに発生します。これは、onclick イベントと似ていますが、onchange イベントは、ユーザーがチェックボックスをクリックしたときだけでなく、キーボードを使用して選択状態を変更したときにも発生します。

<input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
<label for="myCheckbox">オプション 1</label>

<script>
  const checkbox = document.getElementById('myCheckbox');
  checkbox.onchange = function() {
    console.log('チェックボックスの選択状態が変更されました。値:', checkbox.value);
  };
</script>

上記の例は、onclick イベントの例とほぼ同じですが、onchange イベントを使用しています。

複数のチェックボックスの値を取得する

ページに複数のチェックボックスがある場合は、querySelectorAll() メソッドを使用して、選択されたすべてのチェックボックスを取得することができます。

<input type="checkbox" name="checkbox" value="value1">
<input type="checkbox" name="checkbox" value="value2">
<input type="checkbox" name="checkbox" value="value3">

<script>
  const checkboxes = document.querySelectorAll('input[name="checkbox"]:checked');
  for (const checkbox of checkboxes) {
    console.log('選択されたチェックボックスの値:', checkbox.value);
  }
</script>

上記の例では、querySelectorAll() メソッドを使用して、name 属性が "checkbox" で、かつ checked 属性が true のすべてのチェックボックスを取得しています。その後、forEach ループを使用して、各チェックボックスの値をコンソールに出力しています。

HTML チェックボックスの値を取得するには、JavaScript の onclick イベントまたは onchange イベントを使用することができます。また、querySelectorAll() メソッドを使用して、ページにあるすべての選択済みチェックボックスの値を取得することもできます。

onclick イベントを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの値を取得</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
  <label for="myCheckbox">オプション 1</label>

  <script>
    const checkbox = document.getElementById('myCheckbox');
    checkbox.onclick = function() {
      if (checkbox.checked) {
        console.log('チェックボックスが選択されました。値:', checkbox.value);
      } else {
        console.log('チェックボックスが選択解除されました。');
      }
    };
  </script>
</body>
</html>

onchange イベントを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの値を取得</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
  <label for="myCheckbox">オプション 1</label>

  <script>
    const checkbox = document.getElementById('myCheckbox');
    checkbox.onchange = function() {
      console.log('チェックボックスの選択状態が変更されました。値:', checkbox.value);
    };
  </script>
</body>
</html>

複数のチェックボックスの値を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの値を取得</title>
</head>
<body>
  <input type="checkbox" name="checkbox" value="value1">
  <input type="checkbox" name="checkbox" value="value2">
  <input type="checkbox" name="checkbox" value="value3">

  <button onclick="getCheckedValues()">選択された値を取得</button>

  <script>
    function getCheckedValues() {
      const checkboxes = document.querySelectorAll('input[name="checkbox"]:checked');
      const values = [];
      for (const checkbox of checkboxes) {
        values.push(checkbox.value);
      }
      console.log('選択された値:', values);
    }
  </script>
</body>
</html>

これらのサンプルコードは、基本的な使い方を示しています。実際の使用状況に合わせて、コードを適宜変更してください。

チェックボックスの値をフォームデータとして送信するには、submit イベントを使用することができます。

HTML チェックボックスの値を取得するその他の方法

getAttribute() メソッドを使用して、チェックボックスの value 属性を取得することができます。

<input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
<label for="myCheckbox">オプション 1</label>

<script>
  const checkbox = document.getElementById('myCheckbox');
  const value = checkbox.getAttribute('value');
  console.log('チェックボックスの値:', value);
</script>

checked プロパティを使用する

チェックボックスが選択されている場合は、checked プロパティが true になります。

<input type="checkbox" id="myCheckbox" name="myCheckbox" value="value1">
<label for="myCheckbox">オプション 1</label>

<script>
  const checkbox = document.getElementById('myCheckbox');
  if (checkbox.checked) {
    const value = checkbox.value;
    console.log('チェックボックスの値:', value);
  }
</script>

jQuery を使用している場合は、以下のコードを使用してチェックボックスの値を取得することができます。

const value = $('input[name="myCheckbox"]:checked').val();
console.log('チェックボックスの値:', value);

フォームデータを使用する

フォームを送信すると、チェックボックスの値を含むフォームデータが生成されます。このデータを使用して、チェックボックスの値を取得することができます。

<form id="myForm">
  <input type="checkbox" name="myCheckbox" value="value1">
  <label for="myCheckbox">オプション 1</label>
  <button type="submit">送信</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.onsubmit = function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    const value = formData.get('myCheckbox');
    console.log('チェックボックスの値:', value);
  };
</script>

これらの方法は、それぞれ異なる状況で役立ちます。状況に合わせて適切な方法を選択してください。

注意事項

チェックボックスが複数の場合、上記の方法で取得できるのは、選択されているチェックボックスの値のみです。すべてのチェックボックスの値を取得するには、querySelectorAll() メソッドを使用する必要があります。
チェックボックスが disabled 属性を持つ場合、上記の方法で値を取得することはできません。

javascript html events