HTML에서 '모두 선택' 체크박스 기능을 구현하는 방법은 무엇입니까?

HTML에서 "모두 선택" 체크박스 기능 구현

HTML 개발에서 일반적인 과제는 다음을 사용하여 여러 체크박스를 동시에 선택할 수 있도록 하는 것입니다. "모두 선택" 확인란. 이 기능을 사용하면 사용자는 모든 확인란의 상태를 효율적으로 편리하게 전환할 수 있습니다.

"모두 선택" 확인란을 구현하려면 JavaScript 기능을 사용할 수 있습니다. 함수는 모든 체크박스를 반복하고 체크된 속성을 "모두 선택" 체크박스의 값으로 설정해야 합니다. 다음은 이 접근 방식을 보여주는 코드 조각입니다.

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

이 기능을 HTML에 통합하려면 토글()을 호출하는 onClick 이벤트 핸들러와 함께 "Toggle All" 또는 "Select All"이라는 확인란을 추가하세요. 기능. 영향을 받아야 하는 각 확인란의 이름 속성에 동일한 이름(예: "foo")을 할당합니다.

<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/>

이 단계에 따라 "모두 선택" 확인란 기능을 사용자 경험을 향상시키고 선택 과정을 단순화하는 HTML 페이지.

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