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

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

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

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

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

<label><input type="radio" name="gender" class="field_gender" value="1" /> 남자</label>
<label><input type="radio" name="gender" class="field_gender" value="2" /> 여자</label>

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

<script type="text/javascript">
// 남자 선택
$(".gender:input[value=1]").prop("checked", true);

// 여자 선택  
$(".gender:input[value=2]").prop("checked", true);
</script>

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

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

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

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