자바스크립트 체크박스 예제

훨씬 더 복잡해 보이지만 HTML과 JavaScript를 별도로 유지할 수 있기 때문에 더 나은 솔루션입니다. 둘 사이의 유일한 후크는 양식 자체와 확인란 입력 요소에 대한 ID 값입니다. 또한 전역적으로 정의된 함수 나 변수도 사라졌습니다. 이 예제에서 사용자는 확인란을 선택했는지 여부를 확인할 수 있습니다. 이 속성에 대 한 많은 사용 사례가 없습니다. 가장 일반적인 것은 여러 하위 옵션(확인란이기도 함)을 “소유”하는 확인란을 사용할 수 있는 경우입니다. 모든 하위 옵션을 선택하면 소유 확인란도 선택되고 모두 선택하지 않은 경우 소유 확인란이 선택취소됩니다. 하위 옵션 중 하나 이상이 다른 옵션과 다른 상태를 가지면 소유 확인란이 확정되지 않은 상태입니다. 브라우저에서 표시되는 메시지를 자신의 텍스트로 사용자 정의할 수 있기를 바라지만 JavaScript를 통해서만 가능합니다. 요소의 유효성 상태를 직접 확인하고 메시지를 명시적으로 설정(및 지우기)해야 합니다. 레이블에 미리 준비되지만 실제로 백그라운드에서 확인란을 전환합니다.

HTML5 양식 유효성 검사는 일반적으로 누락되거나 잘못된 텍스트 입력에 관한 것이지만 주의가 필요한 다른 양식 요소 유형도 있기 때문에 확인란이 변경되고 있음을 알고 있습니다. 그 중 하나는 겸손한 확인란입니다. 예를 들어 다음 데모에서는 사용자가 관심사를 선택할 수 있도록 여러 확인란을 포함합니다(예제 섹션의 전체 버전 참조). 이것은 아래 예제에서 볼 수 있습니다 (영감CSS 트릭 덕분에). 이 예제에서는 레시피를 위해 수집하는 재료를 추적합니다. 성분의 확인란을 선택하거나 선택을 취소하면 JavaScript 함수가 확인된 재료의 총 수를 확인합니다: 이전 예제는 두 개의 JavaScript 스크립트 블록과 온제출 및 온체인지 이벤트로 약간 복잡해지기 시작했습니다. HTML에 인라인된 처리기입니다. 팁: 폼의 요소 컬렉션을 검색하여 <input type="확인란"에 액세스할 수도 있습니다.

이 확인란이 기본적으로 선택되어 있는지 여부를 나타내는 부울 특성(페이지가 로드될 때). 이 확인란이 현재 선택되어 있는지 여부를 나타내지 않습니다: 확인란의 상태가 변경된 경우 이 콘텐츠 특성은 변경 내용을 반영하지 않습니다. (HTMLInputElement의 확인된 IDL 특성만 업데이트됩니다.) 확인란 이나 레이블 텍스트를 클릭 하면 확인란 상태가 전환 됩니다 및 텍스트 빨간색에서 녹색으로 변경 됩니다. 기본적으로 확인란이 행복하면 레이블이 행복합니다. 확인란 개체 만들기: 자바스크립트를 통해 확인란 개체를 만들 수 있습니다. 요소를 사용하여 document.createElement() 메서드를 사용합니다. 생성 후 appendChild() 메서드를 사용하여 특정 요소(예: div)에 부가하여 표시합니다. Safari를 작성할 때 필요한 입력 필드를 적용하지 않습니다. Safari 또는 다른 지원 되지 않는 브라우저를 사용 하는 경우 모든 예제는 그냥 자바 스크립트 경고 상자를 표시 합니다.

첫 번째 단계는 onclick 처리기를 연결하려는 확인란에 대한 참조를 얻는 것입니다. 단일 확인란 onclick을 처리하려는 경우 일반적으로 ID를 사용하여 참조를 받은 다음 onclick 속성에 함수를 할당합니다.

カテゴリー未分類