[HTML] input radio 버튼 checked 안됨.

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>