JavaScript를 사용하여 선택한 라디오 버튼의 값을 얻는 방법은 무엇입니까?

양식을 디자인할 때 가장 중요한 HTML 구성 요소 중 하나는 라디오 버튼입니다. 사용자는 라디오 버튼으로 표시되는 옵션 중에서 하나만 선택할 수 있습니다.

일반적으로 우리는 HTML 웹 페이지에서 요소의 값을 검색하기 위해 JavaScript에서 요소의 value 속성을 사용합니다. 하지만 라디오 버튼의 경우에는 그렇게 할 수 없습니다. 그 이유는 개별 라디오 버튼의 값을 얻는 것이 나쁜 생각이기 때문입니다.

선택한 라디오 버튼의 값을 얻는 방법을 알아보기 위해 이 글을 시작해 보겠습니다. 이를 위해 우리는 selected 속성을 사용할 것입니다.

선택한 속성 사용

확인된 속성은 부울 속성입니다. 존재하는 경우 페이지가 로드될 때 요소가 미리 선택(선택)되어야 함을 나타냅니다. Checked 속성은 체크박스 및 라디오 입력 유형과 함께 사용할 수 있습니다. JavaScript를 사용하면 페이지가 로드된 후에 확인된 속성을 수정할 수도 있습니다.

문법

속성 확인 구문은 다음과 같습니다 -

으아악

선택한 라디오 버튼의 값을 얻는 방법을 더 잘 이해하기 위해 몇 가지 예를 살펴보겠습니다

예

아래 예에서는 선택한 라디오 버튼의 값을 가져오는 스크립트를 실행합니다.

으아악

스크립트가 실행되면 텍스트, 라디오 버튼, 클릭 버튼으로 구성된 출력이 생성됩니다. 사용자가 라디오 버튼을 선택하고 클릭하면 선택한 값이 팝업으로 표시됩니다.

예

선택한 라디오 버튼의 값을 가져오는 스크립트를 실행하는 다음 예를 고려해 보세요.

으아악

위 스크립트를 실행하면 라디오 버튼 및 제출 버튼과 함께 텍스트를 보여주는 출력 창이 나타납니다. 사용자가 라디오 버튼을 선택하고 제출 버튼을 클릭하면 이벤트가 시작되고 선택한 값이 표시됩니다.

querySelector() 함수 사용

querySelector() 함수는 주어진 선택기 또는 선택기 세트와 일치하는 문서의 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 Null이 반환됩니다.

문법

다음은 querySelector() -

구문입니다. 으아악

예

다음 코드를 실행하고 선택한 라디오 버튼의 값을 얻는 방법을 관찰하세요.

으아악

스크립트를 실행하면 라디오 버튼 및 제출 버튼과 함께 텍스트로 구성된 출력이 생성됩니다. 사용자가 값을 선택하고 버튼을 클릭하면 선택한 값을 보여주는 창이 팝업됩니다.

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