- 基本的なチェックボタンの作成方法:
<input type="checkbox" name="option1" value="value1"> オプション1<br>
<input type="checkbox" name="option2" value="value2"> オプション2<br>
<input type="checkbox" name="option3" value="value3"> オプション3<br>上記のコードでは、3つのチェックボタンが作成されています。ユーザーはそれぞれのチェックボタンを選択することができます。
- チェックボタンのデフォルト選択:
<input type="checkbox" name="option1" value="value1" checked> オプション1<br>
<input type="checkbox" name="option2" value="value2"> オプション2<br>
<input type="checkbox" name="option3" value="value3" checked> オプション3<br>上記のコードでは、"checked"属性を使用してオプション1とオプション3をデフォルトで選択状態にしています。
- チェックボタンのグループ化:
<label><input type="checkbox" name="group1" value="value1"> オプション1</label><br>
<label><input type="checkbox" name="group1" value="value2"> オプション2</label><br>
<label><input type="checkbox" name="group1" value="value3"> オプション3</label><br>上記のコードでは、同じ"name"属性を持つチェックボタンがグループ化されています。ユーザーはグループ内で1つ以上のオプションを選択できます。
- チェックボタンの値の取得:
<input type="checkbox" name="option1" value="value1"> オプション1<br>
<input type="checkbox" name="option2" value="value2"> オプション2<br>
<input type="checkbox" name="option3" value="value3"> オプション3<br>
<button onclick="getSelectedOptions()">選択されたオプションを取得</button>
<script>
function getSelectedOptions() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var selectedOptions = Array.from(checkboxes).map(function(checkbox) {
return checkbox.value;
});
alert('選択されたオプション: ' + selectedOptions.join(', '));
}
</script>上記のコードでは、"getSelectedOptions()"関数が呼び出されると、選択されたチェックボタンの値が取得され、アラートダイアログに表示されます。
これらはHTMLでチェックボタンを使用するための基本的な方法とコード例です。詳細なカスタマイズやスタイリングなど、さらに多くのオプションがありますが、ここでは基本的な使用法を紹介しました。