[jQuery] jQuery로 radio 선택된 값 가져오기.

jQuery로 radio 선택된 값 가져오기.

 

HTML의 라디오 버튼은 사용자가 옵션 세트에서 하나의 옵션만 선택할 수 있도록 하는 쉬운 방법입니다. jQuery를 사용하여 이러한 라디오 버튼에 상호 작용을 추가하고 선택한 옵션을 검색할 수 있습니다.

 

먼저 해당 레이블이 있는 라디오 버튼 집합에 대한 HTML을 만들어 보겠습니다. "radio" 유형의 입력 요소와 이름 속성을 사용하여 버튼을 함께 그룹화할 수 있습니다. value 속성은 선택한 버튼의 값을 지정합니다.

<form>
  <label>
    <input type="radio" name="color" value="red">
    Red
  </label>
  <label>
    <input type="radio" name="color" value="blue">
    Blue
  </label>
  <label>
    <input type="radio" name="color" value="green">
    Green
  </label>
</form>

다음으로 jQuery를 사용하여 이러한 라디오 버튼에 상호 작용을 추가해 보겠습니다. change() 함수를 사용하여 라디오 버튼이 선택된 시기를 감지한 다음 선택된 버튼의 값을 검색할 수 있습니다.

$(document).ready(function() {
  $('input[name="color"]').change(function() {
    var selectedValue = $('input[name="color"]:checked').val();
    console.log(selectedValue);
  });
});

이 코드에서는 먼저 $(document).ready()를 사용하여 문서가 준비될 때까지 기다립니다. 그런 다음 change() 함수를 사용하여 라디오 버튼이 선택될 때 감지합니다. change 함수 내에서 선택한 버튼의 값을 반환하는 $('input[name="color"]:checked').val()을 사용하여 선택한 버튼의 값을 검색합니다. 마지막으로 선택한 값을 콘솔에 기록합니다.

 

이 코드를 사용하여 어떤 라디오 버튼이 선택되었는지 감지하고 선택에 따라 추가 작업을 수행할 수 있습니다. 예를 들어 선택한 색상을 기반으로 페이지의 배경색을 업데이트할 수 있습니다.

$(document).ready(function() {
  $('input[name="color"]').change(function() {
    var selectedValue = $('input[name="color"]:checked').val();
    $('body').css('background-color', selectedValue);
  });
});

이 코드에서는 css() 함수를 사용하여 선택한 값을 사용하여 페이지의 배경색을 업데이트합니다.

결론적으로 jQuery를 사용하여 HTML의 라디오 버튼에 상호작용성을 추가하고 선택한 옵션을 검색할 수 있습니다. 이를 통해 동적이고 응답성이 뛰어난 사용자 인터페이스를 만들 수 있습니다.