라디오 버튼은 사용자로부터 입력을 받기 위해 양식에서 사용되는 아이콘입니다. 이를 통해 사용자는 라디오 버튼 그룹에서 하나의 값을 선택할 수 있습니다. 라디오 버튼은 기본적으로 여러 항목 중에서 단일 선택 , 주로 GUI 형태로 사용됩니다.
두 개 이상의 라디오 버튼 중 하나의 라디오 버튼만 표시/체크할 수 있습니다. 이번 장에서는 자바스크립트 프로그래밍 언어 .
이를 위해 먼저 라디오를 포함하는 폼을 디자인합니다. 버튼 HTML을 사용한 다음 JavaScript 프로그래밍을 사용하여 라디오 버튼을 확인합니다. 또한 어떤 라디오 버튼 값이 선택되었는지 확인하겠습니다.
라디오 버튼 만들기
다음은 라디오 버튼 그룹을 생성하는 간단한 코드입니다.
코드 복사
... 자바에서
가장 좋아하는 계절을 선택하세요:
여름겨울
비오는 날
가을
지금 테스트해보세요
라디오 버튼을 확인하세요
라디오 버튼을 확인하기 위해 특정 코드를 작성할 필요는 없습니다. HTML 형식으로 생성하거나 지정하면 확인할 수 있습니다.
그러나 체크된 라디오 버튼의 값을 얻으려면 JavaScript 코드를 작성해야 합니다. 이에 대해서는 아래 장에서 살펴보겠습니다.
라디오 버튼이 선택되었는지 확인하세요.
JavaScript에는 표시된 라디오 버튼을 확인하거나 어떤 라디오 버튼이 선택되었는지 식별하는 두 가지 방법이 있습니다. JavaScript는 이를 위해 두 가지 DOM 메소드를 제공합니다.
입력 라디오의 체크 속성은 체크박스가 선택되었는지 여부를 확인하는 데 사용됩니다. 사용 document.getElementById('id').checked 이에 대한 방법. 라디오 버튼의 확인된 상태를 부울 값으로 반환합니다. 이는 참일 수도 있고 거짓일 수도 있습니다.
진실 - 라디오 버튼이 선택된 경우.
거짓 - 라디오 버튼이 선택/체크되어 있지 않은 경우.
작동 방식을 알아보려면 아래 JavaScript 코드를 참조하세요.
예
예를 들어 Summer라는 라디오 버튼이 있고 ID = 'summer'입니다. 이제 이 버튼 ID를 이용하여 라디오 버튼이 표시되어 있는지 확인하겠습니다.
코드 복사
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } 쿼리선택기()
querySelector() 함수는 JavaScript의 DOM 메소드입니다. 내부에 있는 라디오 버튼의 일반 이름 속성을 사용합니다. 이 메소드는 어떤 라디오 버튼이 선택되었는지 확인하기 위해 아래와 같이 사용됩니다.
document.querySelector('input[name='JTP']:checked')
예
예를 들어 모든 버튼에 대해 속성 이름 = '시즌'이라는 이름을 갖는 라디오 버튼 그룹이 있습니다. 이제 Season이라는 버튼 사이에서 어떤 버튼이 선택되었는지 확인하겠습니다.
코드 복사
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } 선택된 라디오 버튼의 값을 가져옵니다.
getElementById() 사용
다음은 getElementById() 메소드를 사용하여 선택된 라디오 버튼의 값을 가져오는 코드입니다.
코드 복사
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } querySelector() 사용
다음은 querySelector() 메소드를 사용하여 선택된 라디오 버튼의 값을 가져오는 코드입니다.
코드 복사
완전한 형태
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 선택한 라디오 버튼 값을 가져오는 전체 코드
이 예에서는 위의 모든 코드를 함께 사용하여 라디오 버튼을 만들고 확인합니다. 그런 다음 선택한 라디오 버튼의 값도 가져옵니다.
코드 복사
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } 지금 테스트해보세요 산출
위의 코드를 실행하면 웹에서 실행되고 아래와 같이 출력됩니다.
라디오 버튼 중 하나를 선택하고 제출하다 버튼을 클릭하고 선택한 값을 가져옵니다.
계절을 선택하지 않고 직접 클릭하는 경우 제출하다 버튼을 클릭하면 다음과 같은 오류 메시지가 표시됩니다. 계절을 선택하지 않았습니다. 검증을 사용했기 때문입니다.
선택한 라디오 버튼의 값을 가져옵니다: querySelector()
DOM querySelector() 메소드
querySelector() 함수는 JavaScript의 DOM 메소드입니다. 이 메소드는 지정된 요소와 일치하는 요소를 가져오는 데 사용됩니다. CSS 선택기 문서에서. HTML 코드에서 라디오 버튼의 이름 속성을 지정해야 한다는 점을 기억하세요.
다음과 같이 사용됩니다. document.querySelector('input[name='JTP']:checked') 안에 탭을 클릭하면 라디오 버튼 그룹에서 선택된 라디오 버튼 값을 확인할 수 있습니다. 작은 코드 줄을 사용하여 선택한 라디오 버튼의 값을 가져옴으로써 코드 길이를 최소화합니다.
var selectedValue = document.querySelector('input[name='JTP']:checked')
아래 코드를 HTML 형식과 함께 사용하는 방법을 참조하세요.
코드 복사
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } 지금 테스트해보세요 산출
위의 코드를 실행하면 아래와 같이 웹에 출력이 표시됩니다. 여기에서 좋아하는 계절을 선택하세요.
주어진 라디오 버튼 사이에서 값을 선택하고 제출하다 버튼을 누르면 웹에서 선택한 값을 얻을 수 있습니다.
다음을 클릭한 경우 제출하다 라디오 버튼을 선택하지 않고 버튼을 누르면 다음과 같은 오류 메시지가 표시됩니다. 계절을 선택하지 않았습니다. .
여기에서 두 가지 모두를 볼 수 있습니다. getElementById('시즌').value 그리고 document.querySelector('input[name='JTP']:checked') 동일하게 작동합니다. 둘 다 선택된 라디오 버튼 값을 찾는 데 사용됩니다. 당신은 그들 중 하나를 사용할 수 있습니다.
getElementById 대 querySelector
DOM 메서드 getElementByID()와 querySelector()는 모두 거의 동일하게 작동합니다. 그러나 성능, 코드 크기 등과 같은 차이점도 거의 없습니다. 이들 간의 몇 가지 차이점을 살펴보겠습니다.
역참조 포인터 c
코드 길이
getElementById로 작성된 코드는 querySelector보다 약간 깁니다. getElementById 메소드를 사용하여 선택된 각 라디오 버튼을 개별적으로 확인해야 합니다.
반면에 querySelector DOM 메서드를 사용하는 경우 표시된 라디오 버튼을 확인하고 해당 값을 가져오는 코드 한 줄만 입력하면 됩니다. 따라서 querySelector에는 더 적은 코드가 필요하다는 결론이 나옵니다.
성능
두 기능 모두 좋은 성능을 제공하지만 어느 것이 더 나은지 알아야 합니다. 그만큼 getElementById 방법보다 훨씬 빠릅니다. 쿼리선택기 방법. querySelector 메소드도 약간 복잡합니다.
DOM 메소드에서 사용되는 값
getElementById 메소드는 표시된 버튼을 확인하는 동안 항상 각 라디오 버튼의 고유 ID를 사용하고 해당 ID와 일치하는 첫 번째 요소를 반환합니다.
querySelector는 공통을 사용하는 반면 이름(선택자) 모든 라디오 버튼에 대해 표시된 라디오 버튼을 가져오고 지정된 선택기와 일치하는 첫 번째 요소를 반환합니다.