radio 타입을 jQuery 로 제어할 수 있는 방법

코드

먼저 라디오버튼이 다음과 같을 때

<input type="radio" name="radioName" value="1" />

name이 동일한 라디오 버튼 중에서 '체크'된 라디오 버튼만 갖고 오고 싶다면
다음과 같이 작성하면 된다.

document.querySelector(`input[name="radioName"]:checked`).value

활용예시

라디오 버튼을 활용해서 문제를 만드는 과정에서 다음의 기능을 활용할 수 있다.

// 문제에 대한 클래스를 생성해준다

<script>

  const questionClass = 
  [{
  question : 질문내용, 
  problemOption : {1:"보기 1",
                  2: "보기 2",
                  3: "보기 3",
                  4: "보기 4" }, 
  problemAnswer : 3 // 3번 보기가 정답일시
  }]
  
  
  
  let html = ``;
  html += `<p id="questionClass">${questionClass.question}</p>`
  
  for(let key in questionClass.problemOption) {
  	html += `<li>${questionClass.problemOption[key]}<input type="radio" name="radioName" value="${key}"}"></li>`
   }
   
document.querySelector("div#원하는 곳에 넣어준다.").innerHTML = html;
</script>

활용예시 코드를 설명하자면 문제라는 클래스를 만든다. 클래스 내에는 질문, 보기구성, 질문정답으로 이루어져 있다.
html이라는 string을 나중에 innerHTML로 원하는 div에 넣어주도록 한다.

let key는 클래스 객체의 한 속성을 순회할 때 활용되는데 일반적으로 객체를 순회할 때는 of를 활용하지만 속성은 in을 활용한다. for(let key in 클래스속성) 으로 작성한다.

나중에 정답을 갖고오고 싶을 때는 input[name='radionName']:checked 을 쿼리셀렉터에 넣어줘야함을 잊지말자