[jQuery] 같은 이름의 class 가진 checkbox나 radio 체크 방법

제목이 의도치 않게 좀 어렵게 정해졌네요. 짧게 쓰려다 보니..

풀이하자면 이렇습니다. 보통 체크박스는 하나만 둘 수 있지만 라디오버튼은 보통 한 필드에 여러개를 사용하죠. 이를테면 성별 필드에서 남자/여자 를 선택할 때를 대표적인 예로 들 수 있습니다.

여기서 그럼 아래와 같이 html 이 코딩되어 있다고 가정하겠습니다.

여기서 jquery를 이용해 남자 또는 여자를 체크하고 싶습니다. 어떻게 해야할까요? 보통 여기서 쉽게 해결하기 위해 각각의 id를 부여하겠죠. 하지만 좀 더 지능적인 방법을 사용할 수 있습니다. 아주 간단합니다.

보시면 직관적입니다. gender라는 클래스의 input value 값이 1인 녀석을 체크, 혹은 2인 녀석을 체크합니다. 그리고 일반적으로 prop 말고 attr로 사용하는 경우가 많은데 최근 배포되고 있는 jQuery 를 사용하고 계신다면 attr 대신 prop을 사용해야 정상적으로 작동 됩니다.

(attr과 prop에 대한 자세한 설명은 http://www.freezner.com/archives/391)

jquery 스크립트로 체크박스나 라디오버튼을 체크하는 방법은 많습니다. 순서(eq)나 index를 활용한 방법도 있죠. 하지만 input의 value값을 가지고 체크하는 방법이 제일 안전하고 확실하다고 생각됩니다.

찐빵

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

You may also like...

%d 블로거가 이것을 좋아합니다: