[HTML]Form-radio 중복선택 해결

form의 input태그의 속성중 radio 중복선택 문제 해결

 

● radio : 라디오 버튼을 제공하는 type. 이 타입은 복수개의 input이 반드시 존재하며

             checkbox와 많은 부분이 동일하지만 차이점이 있다면 체크박스는 값을 복수개를

             선택하여 보낼 수 있는 반면 radio 버튼은 단수 개만 가능하다.

위 그림과 같이 동그라미(라디오 모양)을 체크할 수 있는데 본래 하나를 선택하면 다른 동그라미(라디오 모양)들은 해제가 되야하는데 중복으로 체크되는 모습  

 

<form action="#" method="get">
    <ul>
        <li><label for="ra1">라디오1</label>
            <input type="radio" name="ra1" id="ra1" value="r1" checked>
        </li>
        <li><label for="ra2">라디오2</label>
            <input type="radio" name="ra2" id="ra2" value="r2">
        </li>
        <li><label for="ra3">라디오3</label>
            <input type="radio" name="ra3" id="ra3" value="r3">
        </li>
    </ul>
</form>

 

 

해결방법

 

 위 문제는 각각 radio 버튼의 라디오 버튼들이 묶여 있지않고 각각의 다른 영역으로 인식되기 때문이다. 이를 묶기 위해서는 name을 통일하여 선언한다.

<form action="#" method="get">
    <ul>
        <li><label for="ra1">라디오1</label>
            <input type="radio" name="ra" id="ra1" value="r1" checked></li>
        <li><label for="ra2">라디오2</label>
            <input type="radio" name="ra" id="ra2" value="r2" ></li>
        <li><label for="ra3">라디오3</label>
            <input type="radio" name="ra" id="ra3" value="r3" ></li>
    </ul>
</form>

각각의 input 타입의 name값을 "ra"로 통일해주니 아래와 같이 해결됨.