JavaScript를 사용하여 선택 옵션에서 확인란을 사용하는 방법은 무엇입니까?

때로는 선택 옵션에서 확인란을 사용해야 할 때가 있습니다. 선택 옵션이 있는 확인란을 도입하여 사용자가 여러 옵션을 선택할 수 있도록 할 수 있습니다. 그러나 태그의 여러 속성을 사용하는 경우 "ctrl + 왼쪽 클릭"을 눌러 선택할 수 있지만 이는 좋지 않은 사용자 경험입니다. 따라서 사용자 경험을 개선하기 위해 메뉴에 체크박스를 도입할 수 있습니다.

여기에서는 JQuery와 JavaScript를 사용하여 메뉴에서 선택한 체크박스의 값을 관리해 보겠습니다.

맞춤 선택 메뉴 만들기

HTML의 요소는 체크박스를 옵션으로 추가하는 것을 허용하지 않습니다. 따라서 HTML 요소를 사용하여 사용자 정의 드롭다운 메뉴를 만들고 옵션으로 확인란을 추가할 수 있습니다.

문법

사용자는 JavaScript를 사용하여 다음 구문에 따라 사용자 정의 드롭다운 메뉴의 확인란을 관리할 수 있습니다.

으아악

위 구문에서는 showCheckBoxes 변수의 값을 기반으로 사용자 정의 드롭다운 옵션을 표시합니다. 또한 selectedOptions 배열을 반복하여 선택된 모든 확인란을 하나씩 가져올 수 있습니다.

단계

• 1단계 - 메뉴 텍스트가 포함된 div를 만듭니다.

• 2단계 - 이제 맞춤 HTML을 사용하고 옵션에 체크박스 입력 유형을 사용하세요.

• 3단계 - div 요소에 onClick 이벤트를 추가합니다. 사용자가 div를 클릭하면 showOptions() 메뉴가 호출되어야 합니다.

• 4단계 - JavaScript에서 showCheckBoxes 변수를 선언하고 실제 부울 값으로 초기화합니다. showCheckBoxes 변수를 기반으로 사용자 정의 드롭다운 옵션을 표시합니다.

• 5단계 - 사용자가 드롭다운 div 요소를 클릭할 때마다 showCheckBoxes 변수의 값에 따라 옵션 div의 표시를 변경합니다.

• 6단계 - 이제 getOptions() 함수를 정의합니다. getOptions() 함수에서 선택된 모든 체크박스에 액세스하고 for 루프를 사용하여 selectedOptions 배열을 반복하여 선택된 모든 체크박스의 값을 인쇄합니다.

예 1

아래 예에서는 위 알고리즘에 설명된 대로 사용자 정의 선택 메뉴를 만들었습니다. 사용자는 여러 확인란을 선택하여 여러 옵션을 선택할 수 있습니다.

또한 사용자가 "선택한 체크박스 가져오기" 버튼을 클릭하면 getOptions() 함수를 호출하여 선택된 모든 체크박스의 값을 인쇄하므로 선택 메뉴의 선택된 옵션을 모두 가져올 수 있습니다.

으아악

이 튜토리얼에서 사용자는 HTML, CSS 및 JavaScript를 사용하여 사용자 정의 선택 메뉴를 만드는 방법을 배웠습니다. 또한 사용자는 Bootstrap과 같은 일부 CSS 라이브러리를 사용하여 확인란이 있는 선택 메뉴를 만들 수 있습니다.

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