JavaScript를 사용하여 라디오 버튼이 선택되었는지 확인하는 방법은 무엇입니까?

HTML에서 Radio 버튼을 사용하면 개발자가 선택 항목에 대한 여러 옵션을 만들 수 있습니다. 사용자는 어떤 옵션이든 선택할 수 있으며 해당 값을 얻을 수 있고 사용자가 여러 옵션 중에서 어떤 옵션을 선택했는지 알 수 있습니다.

따라서 여러 옵션 중에서 사용자가 선택한 라디오 버튼을 이해하려면 사용자가 어떤 라디오 버튼을 선택했는지 확인하는 것이 중요합니다. 실제 사례를 통해 이해해 봅시다. 양식을 작성하고 성별을 선택하도록 요청하면 세 가지 옵션이 제공되고 하나만 선택할 수 있습니다.

이 튜토리얼에서는 JavaScript를 사용하여 radio 버튼이 선택되었는지 확인하는 두 가지 방법을 알아봅니다.

라디오 버튼의 체크 속성을 사용하세요

다양한 방법을 사용하여 JavaScript의 radio 요소에 액세스할 수 있습니다. 그 다음에는 selected 속성을 사용하여 선택한 라디오 버튼이 선택되었는지 여부를 확인할 수 있습니다. 확인된 속성의 값이 true이면 라디오 버튼이 선택되었음을 의미하고, 그렇지 않으면 선택되지 않습니다.

문법

사용자는 다음 구문에 따라 radio 요소의 checked 속성을 사용하여 radio 버튼이 선택되었는지 확인할 수 있습니다.

으아악

위 구문에서는 ID를 사용하여 라디오 버튼에 액세스하고 check 속성을 사용하여 if 문에서 라디오 버튼이 선택되었는지 확인합니다.

예

아래 예에서는 남성, 여성 등 서로 다른 값을 갖는 3개의 라디오 버튼을 만들었습니다. JavaScript에서는 ID로 각 라디오 버튼에 액세스하고 각 라디오 버튼의 "checked" 속성 값을 확인합니다.

사용자가 라디오 버튼을 선택하고 클릭하면 선택한 라디오 버튼의 값을 보여주는 메시지가 표시됩니다.

으아악

예

아래 예제는 위 예제와 거의 동일하지만, 차이점은 이름을 사용하여 모든 라디오 버튼에 동시에 액세스한다는 것입니다. getElementByName() 메서드는 radio라는 이름의 모든 라디오 요소를 반환합니다.

그런 다음 for-of 루프를 사용하여 라디오 버튼 배열을 반복하고 "checked" 속성을 사용하여 각 라디오 버튼이 선택되었는지 확인합니다.

으아악

querySelector() 메소드를 사용하여 라디오 버튼이 선택되었는지 확인하세요

프로그래머는 JavaScript의 querySelector() 메서드를 사용하여 HTML 요소를 선택할 수 있습니다. 여기서는 선택된 라디오 버튼만 선택하기 위해 querySelector() 메소드를 사용합니다. 라디오 버튼을 선택하지 않으면 null 값이 반환됩니다.

문법

사용자는 다음 구문에 따라 querySelector() 메서드를 사용하여 라디오 버튼이 선택되었는지 확인할 수 있습니다.

으아악

위 구문에서 "연도"는 라디오 버튼 그룹의 이름이며 "연도" 그룹에 속하고 선택된 모든 라디오 버튼을 반환합니다.

예

아래 예에서는 사용자에게 세 가지 다른 선택 사항을 제공하기 위해 세 개의 라디오 버튼을 만들었습니다. 사용자가 "선택한 연도 확인" 버튼을 클릭하면 getSelectedRadio() 함수가 호출됩니다. 이 함수는 querySelector() 메서드를 사용하여 "연도"라는 라디오 버튼을 선택하고 DOM에서 이를 확인합니다.

사용자는 라디오 버튼을 선택하지 않고도 버튼을 클릭하고 출력을 관찰할 수 있습니다.

으아악

사용자는 JavaScript를 사용하여 선택한 라디오 버튼을 얻는 두 가지 방법을 배웠습니다. 가장 좋은 방법은 한 줄의 코드만 작성하면 되므로 querySelector() 메서드를 사용하는 것입니다.

위 내용은 JavaScript를 사용하여 라디오 버튼이 선택되었는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!