| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 |
- 애자일
- 안영미
- 박보영
- DI
- 디자인패턴
- 드온
- mssql
- 초감각
- 강유미
- jquery
- SaveFile
- 영어
- 드래곤볼 온라인
- 두뇌코칭
- 2011프로야구
- Oracle
- ajax
- 가톨릭
- Spring
- 십천2
- wbc
- MySQL
- bean
- G포인트
- 십이지천2
- 분장실의강선생님
- 파이썬
- annotation
- Sybase
- Spring4
- Today
- 16
- Total
- 508,224
행이네
label for를 사용할 때 radio/checkbox의 Click 오류? 본문
HTML상의 컨트롤들은 id와 name으로 구분할 수 있는데...
여러개의 컨트롤중에서 하나나 여럿을 선택해야 하는
radio 와 checkbox가
컨트롤의 제목이나 이름을 나타내는 label for를 사용할 때
사소한 오류(?)를 만들어 낼 수도있다.
radio와 checkbox의 동그라미와 네모를 클릭하지 않고
설명글을 Click 해도 선택/체크되도록 하기 위해서
label for를 사용하는데...
아래처럼 코딩을 하게 되면 기능상의 오류가 발생한다.
|
<input type="radio" id="radioid" name="radioid" value="radiovalue1"> |
라디오2 글자를 Click하면...
희망(!)과는 다르게...
라디오1 이 선택된다...^^;
무엇이 문제인가?
Form Submit을 처리하기 위해서 name은 일치시켜야 하고
jQuery를 사용하기 위해서 id도 일치시켜야 할 것 같지만...?
굳이 그리 하지 않아도 된다.
문제는... label for에서 특정 컨트롤을 for속성에 컨트롤id를 넣기 때문이다.
해결은... radio의 id를 달리해줘야 한다.
|
<input type="radio" id="radioid1" name="radioid" value="radiovalue1"> |
글자 Click으로 값을 선택하는 것은 해결되었다.
이제 Submit을 처리하기 위한
Validation은 어떻게?
일반적으로는 이렇게 사용할 수 있지만 (id가 같았으니)
|
if( typeof $("#radioid:checked").val() == "undefined" ) { |
두번째 방식으로 코드를 바꿨다면 이렇게 처리할 수 있다.
|
if( typeof $(":radio[name=radioid]:checked").val() == "undefined" ) { |
radio의 동그라미나
checkbox의 네모를
정확하게 Click하는 경우엔 전혀 문제가 되지 않지만
편의를 위해 글자를 Click해도 선택되도록 했다면
요롷게 처리해주는게 깔끔할 듯 하다.
'plming > HTML-Web' 카테고리의 다른 글
| [JSP] Smart Editor에 사진 첨부시키기 (0) | 2016.04.06 |
|---|---|
| form submit시 HTML Tag그대로 전달하고싶을 때 (0) | 2016.03.15 |
| label for를 사용할 때 radio/checkbox의 Click 오류? (2) | 2016.01.29 |
| 파일다운로드 구현시, 한글명 때문에 URLEncoder.encode() 사용할 때 (0) | 2016.01.27 |
| IE8 에서는 script의 .trim()은 안됩니다. (0) | 2016.01.27 |
| 보안컨텐츠만 표시됩니다 없애기 (0) | 2015.08.13 |
-
김상현
2021.01.06 13:45
사랑합니다....... 저에게 구원을 주셨습니다......
PC버전 모바일버전 두가지에 input 버튼 label 써서 label된 사진, 버튼들에 클릭시 input에 체크되도록 만들고있엇는데
모바일이 되는것을 확인하고 PC버전을 만들고나니 갑자기 모바일이 안되어서 왜 그런지 도통 이해를 못하고 별 짓거리를 다하고있었는데 이 글을 보고 모바일과 PC버전 iput id에 차이를 주니 해결되었습니다...
감사합니다 복 과하게 받으세요!!!!!!!! -
행이™ 2021.02.21 17:46 신고 도움이 되셨다니 다행이네요. ^^
