[javascript/jquery] input radio 선택된 값만 가져오는 방법

[javascript/jquery] input radio 선택된 값만 가져오는 방법

 

generated by Gemini

 

 

안녕하세요!

 

본업으로 돌아와서

 

javascript로 

 

특정 input radio 로 되어있는 것중

 

선택된것의 값을 확인하려면 어떻게 하는지 공유해보려고 합니다!

 

 

<fieldset>
    <legend>좋아하는 색상을 선택하세요:</legend>
    <label>
        <input type="radio" name="color" value="red" checked> 빨강
    </label><br>
    <label>
        <input type="radio" name="color" value="blue"> 파랑
    </label><br>
    <label>
        <input type="radio" name="color" value="green"> 초록
    </label>
</fieldset>

<button onclick="getRadioValue()">선택 값 확인</button>
<p id="result"></p>

 

 

우선 위와 같이 html 이 있다고 가정하고,

 

3개의 radio input 중 체크된것의 값을 가져오려면 아래와 같이

 

스크립트를 만들어서 사용하시면 됩니다!

 

/**
 * 라디오 버튼 그룹에서 선택된 값(value)을 가져오는 함수
 */
function getRadioValue() {
    // name이 'color'인 라디오 버튼 중 체크된 요소를 찾습니다.
    const checkedRadio = document.querySelector('input[name="color"]:checked');
    const resultParagraph = document.getElementById('result');

    if (checkedRadio) {
        // 선택된 라디오 버튼의 value 속성 값을 가져옵니다.
        const selectedValue = checkedRadio.value;
        resultParagraph.textContent = `선택된 값: ${selectedValue}`;
        console.log(`선택된 값: ${selectedValue}`);
    } else {
        resultParagraph.textContent = '선택된 항목이 없습니다.';
        console.log('선택된 항목이 없습니다.');
    }
}

 

 

위 내용 보시면 아시겠지만,

 

input[name="color"]:checked 이렇게 사용하면

 

color라는 name 가진 input들중에서 체크된것들을 찾아오고

 

input[name="color"]:checked 이게 담겨진 checkedRadio.value 를 사용하면

 

해당 선택된 것의 값을 가져오게 됩니다!

 

참고들 하세요!

 

도움이 되셨다면, 구독/공감/댓글 부탁드립니다!

 

감사합니다!