HTMLとJavaScriptを使用して複数のチェックボックスを選択する方法

1. HTMLでチェックボックスを作成します。例えば、次のようなコードを使用できます:

<input type="checkbox" id="checkbox1" value="option1">
<label for="checkbox1">オプション1</label>
<br>
<input type="checkbox" id="checkbox2" value="option2">
<label for="checkbox2">オプション2</label>
<br>
<input type="checkbox" id="checkbox3" value="option3">
<label for="checkbox3">オプション3</label>

2. JavaScriptを使用して、選択されたチェックボックスを取得します。以下のコードを使用します:

// チェックボックスの要素を取得
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// チェックされたチェックボックスの値を取得
var selectedCheckboxes = Array.from(checkboxes).filter(function(checkbox) {
  return checkbox.checked;
}).map(function(checkbox) {
  return checkbox.value;
});
// 選択されたチェックボックスの値を表示
console.log(selectedCheckboxes);

このコードでは、querySelectorAllメソッドを使用して、すべてのチェックボックス要素を取得し、checkedプロパティを使用して選択されたチェックボックスをフィルタリングしています。最後に、選択されたチェックボックスの値を配列として表示しています。

以上が、HTMLとJavaScriptを使用して複数のチェックボックスを選択する方法です。これを参考にして、自分のウェブページやアプリケーションに適用してみてください。