jquery checkbox 전체 선택, 전체 해제, 체크 값 추출
jquery를 이용하여 checkbox 핸들링 테스트를 해보았다.
- 체크 박스 전체 석택
- 체크 박스 전체 해제
- 체크 되어 있는 값 추출
- 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 체크 박스 모두 체크
$("#checkAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", true);
});
});
// 체크 박스 모두 해제
$("#uncheckAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", false);
});
});
// 체크 되어 있는 값 추출
$("#getCheckedAll").click(function() {
$("input[name=box]:checked").each(function() {
var test = $(this).val();
console.log(test);
});
});
// 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
$("#updateChecked").click(function() {
var splitCode = $("#splitCode").val().split(",");
for (var idx in splitCode) {
$("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
}
});
// test case
test1();
});
function test1() {
console.log("################################################");
console.log("## test1 START");
console.log("################################################");
var cnt = $("input:checkbox").size();
console.log("checkboxSize=" + cnt);
$("input[name=box]:checkbox").each(function() {
var checkboxValue = $(this).val();
console.log("checkboxValue=" + checkboxValue);
});
console.log("----------------------------------------------");
$("#checkboxArea").children().each(function() {
var checkboxValue = $(this).children(":checkbox").val();
var text = $(this).children().eq(1).text();
console.log(text + "=" + checkboxValue);
});
}
</script>
</head>
<body>
<div id="checkboxArea">
<li><input type="checkbox" name="box" value="A" /><label>1번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="B" /><label>2번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="C" /><label>3번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="D" /><label>4번째 checkbox</label></li>
</div>
<br/><br/>
<div id="buttonGroups">
<input type="button" id="checkAll" value="check all" />
<input type="button" id="uncheckAll" value="uncheck all" />
<input type="button" id="getCheckedAll" value="get checked all" />
<input type="button" id="updateChecked" value="updateChecked" />
</div>
<input type="hidden" id="splitCode" name="splitCode" value="A,C,D" />
</body>
</html>
한 가지 고민스러운 것은 서버에서 받아온 데이터가 콤마가 아닌 리스트 형태일 경우 어떻게 처리하는 것이 좋을까 이다.
service layer에서 리스트 형태의 checkbox 데이터를 콤마 형태로 가공한 후 view에 던져줘야 할까?
아니면 리스트로 받은 데이터를 view에 던져주어 데이터 가공 작업을 위임할까?
okjsp에 질문올려서 다른 분들은 어떤 방법을 사용하고 있는지 알아봐야 겠다.
'프로그래밍' 카테고리의 다른 글
| 이클립스 junit 특정 메소드만 테스트를 실행하고 싶을 때 (1) | 2012.11.07 |
|---|---|
| html table merge (4) | 2012.11.06 |
| jquery radio 테스트 (2) | 2012.11.06 |
| XML namespace 이해하기 (0) | 2012.11.06 |
| jquery selector 실습 (1) | 2012.11.02 |
| javascript Array객체에 contains 메서드 추가 (2) | 2012.11.02 |
| 대입연산자 잘못 쓰면 이렇게 된다. (0) | 2012.11.01 |
| javascript delete 연산자 (0) | 2012.10.29 |
