본문 바로가기

개발/JavaScript

[스크랩]JQUERY CHECK BOX 관련 기능 정리

출처: http://darkhorizon.tistory.com/240
<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);
      } 
  });