[HTML] input radio 버튼 checked 안됨.

Programming/HTML

[HTML] input radio 버튼 checked 안됨.

Space_Jin 2023. 1. 28. 04:19

728x90

HTML radio button의 checked 문제 해결 건

상당히 오랜만에 블로그 글을 작성하는데 이유가 조금 황당하다.

최근 회사에서 하이브리드 앱 개발도 맡게 되어서 약간의 프론트엔드 개발 건이 잦아졌다.

오늘 코드를 수정하다 input tag의 radio 버튼의 checked 속성이 제대로 동작하지 않는 것을 발견했다.

문제는 이러했다.

"버튼1"과 "버튼3"이 checked 속성으로 기본 load시 checked가 되어야하는데 이상하게 "버튼1"이 checked가 되지않는 것이었다.

퍼블리싱이나 프론트엔드 개발을 많이 하셨던 분들이라면 눈치채겠지만 내 코드는 이러했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li><input type="radio" name="btn" checked>버튼1</li>
            <li><input type="radio" name="btn" >버튼2</li>
        </ul>
        <ul>
            <li><input type="radio" name="btn" checked>버튼3</li>
            <li><input type="radio" name="btn" >버튼4</li>
        </ul>
    </div>
</body>
</html>

문제는 바로 input tage 안의 name 속성의 값이 같다는 것 이었다.

radio button은 같은 그룹내에서 (같은 name 속성) 하나만 선택(checked)될 수 있기 때문이다.

페이지가 load되는 시점에서 더 나중에 checked가 되어있는 "버튼3"이 최종적으로 checked 되어서 표기가 된 것이다.

내가 원했던 결과인 페이지 load 시 "버튼1" 과 "버튼3"은 기본으로 checked 를 가져오려면 코드를 아래와 같이만 수정했으면 됐다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li><input type="radio" name="btn1" checked>버튼1</li>
            <li><input type="radio" name="btn1" >버튼2</li>
        </ul>
        <ul>
            <li><input type="radio" name="btn2" checked>버튼3</li>
            <li><input type="radio" name="btn2" >버튼4</li>
        </ul>
    </div>
</body>
</html>

조금 더 자세한 내용은 아래 사이트에서 확인 가능하다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/radio

<input type="radio"> - HTML: Hypertext Markup Language | MDN

radio 유형의 <input> 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오

developer.mozilla.org

기본적으로 나는 서버 개발자이지만 이런 간단한 부분을 제대로 숙지하지 못했다는 것에 당황하기도 했고 과거와 최근의 공부량 부족을 반성하게 되는 계기도 됐다. 해당 문제가 있었던 다음날 새벽에 잠이 깼는데 전날의 문제가 계속 생각나서 글을 써본다.

화면단의 개발도 진행해야하는 만큼 앞으로 프론트엔드 쪽 공부도 꾸준히 해야겠다는 생각이 들게 해준 경험이었다.

728x90

저작자표시