JavaScript 또는 jQuery 를 사용하여 라디오 버튼을 확인하는 방법
우리는 종종 jQuery 또는 JavaScript 와 같은 클라이언트 측 스크립팅을 사용하여 대화식의 빠른 성능을 갖춘 웹 사이트를 만들고 웹 서버를 추가로 방문하지 않고도 양식 유효성 검사와 같은 간단한 작업을 효율적으로 완료 할 수 있습니다.
기본적으로 또는 버튼 클릭 이벤트에서 단일 선택 단추를 선택하려는 경우 JavaScript 또는 jQuery 를 사용할 수 있습니다.
양식을 정의하여 시작하겠습니다.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
JavaScript 를 사용하여 라디오 버튼 확인
ID 를 사용하여 라디오 버튼을 선택하십시오
라디오 버튼을 미리 선택하는 가장 좋은 방법 중 하나는 해당 버튼을 ID 로 참조하는 것입니다. ID 를 사용하여 DOM 요소를 선택하기 위해 접두사#를 ID 에 추가하고 선택된 값을 true 로 설정합니다.
document.querySelector('#myradio_1').checked = true;
출력 : 라디오 버튼 1이 선택되었습니다.
값을 사용하여 라디오 버튼을 선택하십시오
다른 옵션은 단일 선택 단추의 값을 사용하여 단일 선택 단추를 미리 선택하는 것입니다. 값별 선택은 라디오 버튼의 ID 는 모르지만 값을 알고있는 시나리오에서 유용 할 수 있습니다.
부모 div 의 ID 를 사용하고 값이 2 인 요소를 선택할 수 있습니다. 그런 다음 checked 속성을 true 로 설정할 수 있습니다.
document.querySelector('#radiobuttonset > [value="2"]').checked = true;
출력 : 라디오 버튼 2가 선택되었습니다.
DOM 에 사전 정의 된 값과 같은 다른 요소가없는 경우 값을 확인하여 요소를 선택할 수 있습니다. 이 경우 부모 ID 가 필요하지 않습니다.
document.querySelector('[value="3"]').checked = true;
출력 : 라디오 버튼 3이 선택되었습니다.
jQuery 를 사용하여 라디오 버튼 확인
JavaScript 를 사용하는 것 외에도 jQuery 라이브러리를 사용하여 미리 정의 된 값을 기반으로 라디오 버튼을 확인할 수 있습니다. jQuery 는 JavaScript 를 사용하여 빌드 된 라이브러리입니다. HTML DOM 순회 및 조작을 단순화하는 데 도움이됩니다. jQuery 구문도 JavaScript 보다 간단합니다.
jQuery 사용을 추가하려면 CDN 또는 로컬 파일에서 jQuery 라이브러리에 대한 참조를 추가하십시오.
ID 를 사용하여 라디오 버튼을 선택하십시오
JavaScript 와 마찬가지로 ID 를 사용하여 DOM 요소에 액세스하기 위해 접두사#를 사용합니다. 그러나 정확한 구문은 사용 된 jQuery 의 릴리스에 따라 다릅니다.
현재 안정적인 jQuery 버전은 3.4.1입니다.
jQuery 의 버전이 1.6 이상 (> =) 1.6
사용 된 jQuery 의 버전이 1.6 이상인 경우 prop를 사용하여 checked 속성을 true 로 설정합니다.
$('#myradio_1').prop('checked', true);
출력 : 라디오 버튼 1이 선택되었습니다.
jQuery 의 버전은 (<) 1.6 이전의 버전입니다
jQuery 버전이 1.6 이전 인 경우 attr 을 체크 한대로 업데이트 할 수 있습니다.
$('#myradio_2').attr('checked', 'checked');
출력 : 라디오 버튼 2가 선택되었습니다.
값을 사용하여 라디오 버튼을 선택하십시오
버튼 값을 기반으로 라디오 버튼에 대해 선택된 값을 업데이트 할 수도 있습니다.
$('input[name=radiobutton][value=\'1\']').prop('checked', true);
출력 : 라디오 버튼 2가 선택되었습니다.
버튼 클릭을 기준으로 라디오 버튼 확인
JavaScript 또는 jQuery 를 사용하여 라디오 버튼을 업데이트하는 방법을 알고 나면 버튼 클릭과 같은 이벤트 또는 다른 요소를 선택하여 선택 항목을 업데이트 할 수 있습니다. 테스트하려면 양식을 업데이트하여 버튼을 추가하십시오.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
<button id="button_1">check 1</button>
그런 다음 버튼에 클릭 이벤트를 추가 할 수 있습니다. 클릭하면 첫 번째 라디오 버튼이 선택됩니다.
$('#button_1').click(function() {
$('input[name=radiobutton]').val(['1']);
});
출력 : 라디오 버튼 1이 선택되었습니다.