80.jQuery - CheckBox AllCheck (13.Sample )
jQuery를 이용한 체크박스관련 예제입니다.
ps. jquery 버전의 차이로 attr 속성이 안되는 경우가 있습니다.
attr -> prop 로 해주시면 됩니다.
| ckboxAllCheck.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>체크박스 전체선택 및 해제</title> <script src="../../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() { //[1] 전체선택 체크박스 클릭시 $('#chkAll').click(function() {
//ul에 포함되어져 있는 모든 체크박스를 가져옴 var $checkboxes = $(this).parents('ul:first').find(':checkbox');
//chkAll 체크되어져 있다면, "전체선택" -> "선택해제" if (this.checked) { //<em>의 텍스트 "선택헤제"로 변경 (em은 다음이라는 요소) $(this).next().text("선택해제");
//모든 체크박스에 checked속성을 추가 $checkboxes.attr('checked', 'true'); } else { $(this).next().text('전체선택'); $checkboxes.attr('checked', ''); } }); }); </script> </head>
<body> <ul> <li><label><input type="checkbox" id="chkAll" /><em>전체선택</em></label></li> <li><label><input type="checkbox" id="Checkbox1" />C#</label></li> <li><label><input type="checkbox" id="Checkbox2" />ASP.NET</label></li> <li><label><input type="checkbox" id="Checkbox3" />SilverLight</label></li> <li><label><input type="checkbox" id="Checkbox4" />WPF</label></li> </ul> </body> </html> |
| 결과화면 |
|
ckboxAllCheck.htm