jQuery 체크박스 변경 및 클릭 이벤트

 

질문 : jQuery 확인란 변경 및 클릭 이벤트

---

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

여기서 .change() 는 확인란 상태로 텍스트 상자 값을 업데이트합니다. .click() 을 사용하여 선택 취소 작업을 확인합니다. 사용자가 취소를 선택하면 확인 표시가 복원되지만 .change() 가 실행됩니다.

이로 인해 일관되지 않은 상태가 유지되고 확인란을 선택하면 텍스트 상자에 false가 표시됩니다.

취소를 처리하고 텍스트 상자 값을 확인 상태와 일관되게 유지하려면 어떻게해야합니까?

답변

---

JSFiddle에서 테스트하고 원하는 작업 을 수행합니다.이 접근 방식은 확인란과 관련된 레이블을 클릭 할 때 발생하는 추가 이점이 있습니다.

업데이트 된 답변 :

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

원래 답변 :

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

출처 : https://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event