[jQuery] 체크박스 값변경 선택 및 감지하기

조회 2,413회 댓글 0건

jQuery를 이용한 체크박스 사용에 관한 것입니다.

체크박스는 원칙적으로 만들어지기를 여러개를 선택할 수 있는것을 말합니다.

그렇기 때문에 체크된 값을 가져올때는 모두 가져오는것이 아니라 맨 앞에 있는것이 리턴이 되며 체크된 모든것을 가져오게 하려면 루프를 돌려서 사용하면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery test </title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
</head>

<body>


<div class="container-fluid">

  <div class="row">
    <div class="col-md-12">

      <form>
        <input type="checkbox" id="chk1" name="chkBox" value="1"> chk1 &nbsp;
        <input type="checkbox" id="chk2" name="chkBox" value="2"> chk2 &nbsp;
        <input type="checkbox" id="chk3" name="chkBox" value="3"> chk3 &nbsp;
        <input type="checkbox" id="chk4" name="chkBox" value="4"> chk4 &nbsp;
      </form>

    </div>
  </div>

</div>

</body>
</html>

<script>

$(document).ready(function()
{
  // id 값으로 체크 되었는지 확인 한다
  if ( $('input:checkbox[id="chk2"]').is(":checked") == true ) {
    console.log('id -> chk2 체크 되었습니다.');
  }
  // name 값으로 체크 되었는지 확인 한다
  if ( $('input:checkbox[name="chkBox"]').is(":checked") == true ) {
    console.log('name -> chk2 체크 되었습니다.');
  }

  // id값은 유니크한 특성 때문에 이름이 같은 경우만 갯수 체크가 가능하게 된다
  console.log('체크박스 갯수: ', $('input:checkbox[name="chkBox"]').length );
  console.log('체크된   갯수: ', $('input:checkbox[name="chkBox"]:checked').length );
  console.log("\n");

  // 체크박스 루프
  $('input:checkbox[name="chkBox"]').each(function()
  {
    // 값이 2인것을 체크 한다
    if ( this.value == 2 ) {
      this.checked  = true;
      this.value    = 55;
      var idx       = $(this).index();
      console.log( '체크박스명:', this.name, ' id명:', this.id, ' 값:', this.value, ' 인덱스값:', idx );
    }
  });
  console.log("\n");

  // 특정 id값에 대한 체크박스를 체크해주기 - attr이 아니라 prop를 사용해야 한다
  $('input:checkbox[id="chk2"]').prop('checked', false);
  $('input:checkbox[id="chk3"]').prop('checked', true);
  $('#chk4').prop('checked', true);
  console.log('체크된   갯수: ', $('input:checkbox[name="chkBox"]:checked').length, ' / chk2 변경한값 확인: ', $('#chk2').val() );

  // 여러개일 경우 앞의 것이 나온다
  console.log('체크된 값: ',  $('input:checkbox[name="chkBox"]:checked').val() );

  // 현재 상태 전체 반전 시키기
  $('[name=chkBox]').prop('checked', function(i, val){ return !val });

  // 2번째 인덱스의 값 가져오기 - 0 부터 시작하는것을 알 수 있다
  console.log( '인덱스로 접근하기: ',  $('[name=chkBox]').eq(1).val() );

  // 체크되지 않는것만 확인하기
  $('input[name="chkBox"]:not(:checked)').each(function() {
    console.log( '체크되지 않는것: ', this.id, ' - 값:', $(this).val() );
  });

  // 기능이 안되게 설정 하기
  $('input:checkbox[id="chk2"]').prop('disabled', true);


  // 없는 id name 지정해도 오류는 발생 하지 않는다
  $('input:checkbox[id="abc"]').attr('checked', true);
  $('input:checkbox[name="abc"]').attr('checked', true);

  // 값이 맞는것을 찾아서 섡택 되게 한다
  $('input[name=chkBox][value=1]').prop("checked", true).change();


  // ----------------------------------------------
  // 체크된것 감지하기
  // ----------------------------------------------
  $('input:checkbox[name="chkBox"]').change(function() {
    console.log( '감지된 - 체크박스명:', this.name, ' id명:', this.id, ' 값:', this.value, ' 체크상태: ', this.checked );
  });
  console.log("\n");


});
</script>

최신버전에선 attr -> prop로 변경 되었습니다.