HTML에서 '모두 선택' 확인란을 만드는 방법은 무엇입니까?

HTML에서 단일 "모두 선택" 확인란을 사용하여 모든 확인란을 선택하는 방법

HTML 페이지에서 "모두 선택" 확인란 만들기 한 번의 클릭으로 여러 확인란을 편리하게 선택할 수 있습니다. 이 기능을 구현하면 사용자 경험이 향상되고 양식 제출이 간소화됩니다.

"모두 선택" 확인란을 구현하려면 JavaScript를 사용하여 다른 모든 확인란의 선택 속성을 조작할 수 있습니다.

<script type="text/javascript">
  function toggleAll(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name="foo"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

이 스크립트에서는 소스 체크박스("모두 선택" 체크박스)가 선택될 때마다 이름이 "foo"인 모든 체크박스의 선택 상태를 전환하도록ggleAll() 함수가 정의됩니다. 클릭했습니다.

이 스크립트를 사용하려면 HTML에 다음 확인란을 추가하기만 하면 됩니다.

<input type="checkbox" onclick="toggleAll(this)" /> Select All

통합된 후 "모두 선택" 확인란을 클릭하면 이제 다른 모든 확인란의 선택 상태가 전환됩니다. 페이지에 "foo"라는 이름의 확인란이 있습니다. 이는 사용자가 양식의 모든 항목을 빠르고 쉽게 선택할 수 있는 편리한 방법을 제공합니다.

위 내용은 HTML에서 '모두 선택' 확인란을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!