[jQuery]체크박스 체크하기

jQuery는 사용법만 알면 참 편리하다.

먼저 체크박스를 해제하는 방법은 다음과 같다.

$("input:checkbox[id='id값']").prop("checked", false);    

 

반대로 체크박스를 체크하는 방법은?

$("input:checkbox[id='id값']").prop("checked", true);    

현재 토이프로젝트로 진행중인 부분에 이 방법을 사용한 곳이 있다.
방명록 쪽에서 비공개(체크박스)로 글을 남길 경우 글 등록에 성공하면 체크박스를 다시 처음으로 복귀시켜야 했다.(화면 새로고침이 아닌 비동기식 설계를 했기 때문에)

코드의 일부버튼 클릭 시 create_check() 함수가 실행되는데 몇가지 체크 후 create_proc() 함수를 다시 호출한다.

ajax 처리 후 reload() 함수를 호출해서 체크박스를 초기화시킨다.

$("input:checkbox[id='customControlAutosizing']").prop("checked", false);

list.jsp

<div class="form-group">
  <div class="input-group mb-3" style="width: 50%">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">닉네임</span>
    </div>
      <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1" id="g_name" name="g_name">              
  </div>                        
</div>
            
<div class="form-group">    
  <textarea class="form-control" rows="4" id="g_content" name="g_content" placeholder="여러분의 의견을 자유롭게 작성해주세요."></textarea>
</div>
          
<div class="form-row align-items-center">
  <div class="col-auto">              
     <input type="password" class="form-control mb-2" id="g_password" name="g_password" placeholder="비밀번호" disabled="disabled" value="">
  </div>      
  <div class="col-auto" style="margin-bottom: 7px">
    <div class="custom-control custom-checkbox mr-sm-2">
      <input type="checkbox" class="custom-control-input" id="customControlAutosizing" onclick="showHidden()">
      <label class="custom-control-label" for="customControlAutosizing">비공개</label>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 7px">
    <button type="button" class="btn btn-outline-secondary" style="width: 100%; font-weight: bold" onclick="create_check()">
       등   록          
     </button>
  </div>
</div>

list.jsp

function create_proc(){
    $.ajax({
        url: "./create_proc.jsp",
    type: "POST",
    cache: false,
    dataType: "json",
    data: $('#frm').serialize(),    
    success: function(data){ // 정상 처리
      alert(data.msgs);
      reload();
      list();
    },    
    error: function (request, status, error){        
        var msg = "ERROR : " + request.status + "<br>"
      msg +=  + "내용 : " + request.responseText + "<br>" + error;
      console.log(msg);   
    }
    });
}

list.jsp

function reload(){
    $('#'+$('#g_img').val()).attr('src','../images/'+$('#g_img').val()+'.png');    
    $('#g_name').val('');
    $('#g_content').val('');
    $('#g_password').val('');    
    $('#g_password').attr('disabled', true);
    $("input:checkbox[id='customControlAutosizing']").prop("checked", false);    
}

---

보통 태그들의 속성값을 다룰 때 attr() 함수를 많이 쓰는데 JQuery 버전 1.6이후부터 attr() 함수의 용도에 따라 attr()와 prop()로 나뉘게 되었다.

attr()은 html 속성을 다루고 prop()는 자바스크립트의 프로퍼티를 다룬다. 즉, object의 속성값들을 다룬다.

체크박스의 경우 attr()과 prop() 사용에 차이가 있다.

attr() : 결과값은 checked="checked"의 checked가 된다.

<input type="checkbox" class="custom-control-input" id="customControlAutosizing" checked="checked" onclick="showHidden()">

$("input:checkbox[id='customControlAutosizing']").attr("checked")

prop() : 결과값은 TRUE 또는 FALSE가 된다.

$("input:checkbox[id='customControlAutosizing']").prop("checked");

때문에 체크박스를 제어할 때는 prop() 함수를 사용하는 것이 좋다.

+ 피드백은 언제나 환영입니다 :)