JavaScript 또는 jQuery 를 사용하여 라디오 버튼을 확인하는 방법

  1. JavaScript 를 사용하여 라디오 버튼 확인
  2. jQuery 를 사용하여 라디오 버튼 확인
  3. 버튼 클릭을 기준으로 라디오 버튼 확인

우리는 종종 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이 선택되었습니다.