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

HTML에서 "모두 선택" 확인란 구현

웹 개발에서는 사용자가 여러 항목을 선택해야 하는 상황에 직면하는 것이 일반적입니다. 목록에서. 이 프로세스를 단순화하는 다목적 솔루션은 "모두 선택" 확인란을 구현하는 것입니다. 이 확인란을 선택하면 페이지의 다른 모든 확인란이 자동으로 선택됩니다.

JavaScript 솔루션

이 기능을 구현하려면 JavaScript를 사용할 수 있습니다. 다음은 구현을 보여주는 코드 조각입니다.

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

HTML 통합

다음과 같이 JavaScript 함수를 HTML 코드에 통합합니다.

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />

<input type="checkbox" name="foo" value="bar1" /> Bar 1<br />
<input type="checkbox" name="foo" value="bar2" /> Bar 2<br />
<input type="checkbox" name="foo" value="bar3" /> Bar 3<br />
<input type="checkbox" name="foo" value="bar4" /> Bar 4<br />

기능적 동작

"Toggle All" 확인란을 선택하면 다른 모든 확인란이 선택됩니다. 선택을 취소하면 다른 모든 확인란이 선택 해제됩니다. 이를 통해 사용자는 단 한 번의 클릭으로 여러 항목을 빠르게 선택하거나 선택 취소할 수 있습니다.

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