チェックボックスの基本的な実装方法は以下の通りです:
<input type="checkbox" name="item1" value="Item 1"> Item 1<br>
<input type="checkbox" name="item2" value="Item 2"> Item 2<br>
<input type="checkbox" name="item3" value="Item 3"> Item 3<br>上記のコードでは、3つのチェックボックスが作成されており、それぞれの名前と値が指定されています。
次に、全選択機能を実装する方法を見てみましょう。以下のコード例では、チェックボックスの上部にある「全選択」チェックボックスをクリックすることで、全ての項目を一括で選択できます。
<input type="checkbox" id="select-all"> Select All<br>
<input type="checkbox" class="item-checkbox" name="item1" value="Item 1"> Item 1<br>
<input type="checkbox" class="item-checkbox" name="item2" value="Item 2"> Item 2<br>
<input type="checkbox" class="item-checkbox" name="item3" value="Item 3"> Item 3<br>
<script>
document.getElementById('select-all').addEventListener('change', function() {
var checkboxes = document.getElementsByClassName('item-checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
</script>上記のコードでは、全選択チェックボックスにid="select-all"が追加され、各項目のチェックボックスにはclass="item-checkbox"が追加されています。JavaScriptを使用して、全選択チェックボックスの状態が変更されたときに、各項目のチェックボックスの状態を一括で変更しています。
このようにして、HTMLチェックボックスの全選択機能を実装することができます。