-
제이쿼리 체크박스Front-End/jQuery 2012. 11. 6. 12:53
<body>
<input type="checkbox" id="mod_gb1" name="mod_gb" value="1" class="border-none" /> 이용 <br />
<input type="checkbox" id="mod_gb2" name="mod_gb" value="2" class="border-none" /> 변경 <br />
<input type="checkbox" id="mod_gb3" name="mod_gb" value="3" class="border-none" /> 해지
<input type="button" id="btn" />
</body>
1. 특정 체크박스 체크 확인
<script>
$('#mod_gb2').click(function() {
var ischecked = $('#mod_gb2').attr('checked');
if(ischecked){
alert("2번이 체크되었습니다.");
}else{
alert("2번이 체크되지 않았습니다.");
}
});
</script>
2. 체크 박스 전체$('input[name=mod_gb]:checkbox').click(function() { // name이 mod_gb인 체크박스 그룹의 아무 박스를 선택하면
var gb1 = $('#mod_gb1').attr('checked');
var gb2 = $('#mod_gb2').attr('checked');
var gb3 = $('#mod_gb3').attr('checked');
if(gb3 && (gb1 || gb2)){
alert("ID 해지는 다른 항목과 중복 선택하실 수 없습니다.");
$('#mod_gb3').attr('checked', false);
}
});
3. 체크박스 선택 유무 확인
$('#btn').click(function(){
var cnt = $("input[name=mod_gb]:checkbox:checked").length;
if(cnt < 1){
alert('한 개 이상을 선택하셔야 합니다');
}else{
alert(cnt+'개가 선택되었습니다');
}
});
4. 체크박스 숫자 확인
$('#all').click(function() {
var checkboxCnt = $("input:checkbox").length; // 체크박스 전체 갯수
var checkYn = $('#all').attr('checked');
if(checkYn){
$('input:checkbox').attr('checked',true);
$('input:checkbox').attr('disabled',true);
$('#all').attr('disabled',false);
}else{
$('input:checkbox').attr('checked',false);
$('input:checkbox').attr('disabled',false);
}
});'Front-End > jQuery' 카테고리의 다른 글
Jquery js file Error 대처법 (0) 2013.07.16 Div Loading 이미지 영역 Dimm (0) 2013.07.04 날짜값 + - 현재 날짜 가져오기 (0) 2013.07.04 JSON object 복사 / clone (0) 2013.05.24 Jquery select Add or Remove (0) 2012.11.14 Jquery Selector 예시 (0) 2012.11.08 날짜 시간값 계산 (0) 2012.07.24 Jquery 아코디언 형식 (0) 2012.06.27 CSS position 속성 (0) 2012.06.27 jQuery 입력 폼 플러그인 (1) 2012.06.20 댓글