근황.
웹표준과 자바스크립트 공부에 박차를 가하고자 어떤 견적 계산기가 제공되는 웹페이지를 만들고 있다.
알고리즘을 정리하다보니 A와 B중 하나만을 선택해야 하는 radio 버튼이 필요함을 알게 됐다.
그래서 아래와 같이 html코드를 작성해보았다.
<body>
<div>
<p>
선택1 <input id="check1" type="radio">
</p>
<p>
선택2 <input id="check2" type="radio">
</p>
</div>
</body>
그럼 아래와 같은 radio 형식의 체크박스가 나온다.
사용자들은 보통 웹서비스에서 이런 버튼이 나타나면 '음. 둘 중 하나만 선택할 수 있구나'라고 생각할 거다.
나 역시 그런 마음에 이렇게 해줬으나.. 이 버튼은 둘 다 선택된다.. -_-;;;
뭐지....; 이 배신당한 기분은 ;;
선택1
선택2
방법을 찾아보다가
input 속성에 name=""을 넣어주면 간단히 해결됨을 알아낼 수 있었다.
<body>
<div>
<p>
선택1 <input id="check1" name="check" type="radio">
</p>
<p>
선택2 <input id="check2" name="check" type="radio">
</p>
</div>
</body>
이렇게 파란색 부분을 추가해주었다.
여기서 포인트는 name 속성의 속성 값을 같게 해주는 것이다.
그래야 두가지 radio 버튼이 같은 종류로 묶인다.
name 값이 다르다면 문제가 해결되지 않는다.
정확한 개념인지는 모르겠으나 현재는 이것을 class와 비슷하다고 인지하고 있다.
아.무.튼.
아래와 같이 문제 해결 완료.
선택1
선택2
에혀.. 쌓인 문제가 태산이다.-_-;