사용자 확인을 처리할 때 Checkbox 및 TextBox 일관성을 유지하는 방법은 무엇입니까?

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?");
    }
  });
});

여기에서 .change() 이벤트는 텍스트 상자의 값을 기반으로 업데이트합니다. 확인란의 선택 상태를 확인하고 .click() 이벤트는 확인란 선택을 취소하라는 확인 메시지를 표시합니다. 그러나 이 접근 방식은 불일치를 초래합니다. 확인 메시지가 표시되는 동안 사용자가 취소(아니요 선택)하면 확인란이 선택 취소된 상태로 유지됩니다. 그러나 확인 전에 Change() 이벤트가 트리거되므로 텍스트 상자의 값이 false로 업데이트되어 확인란이 선택되어 있는 동안 선택 취소 상태를 나타냅니다.

이 문제를 해결하려면 스크립트를 다음과 같이 수정해야 합니다. 취소를 올바르게 처리하십시오. 한 가지 접근 방식은 다음과 같습니다.

$(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);        
    });
});

이 업데이트 버전에서는 확인란을 선택해야 하는지 확인하는 조건부 확인 기능이 도입되었습니다. 확인이 취소되면 prop() 메서드를 사용하여 확인란의 선택 상태를 복원합니다. 그런 다음 확인란의 실제 상태에 따라 텍스트 상자의 값이 업데이트되어 확인란의 선택 상태와 연결된 텍스트 상자 값 간의 일관성이 보장됩니다.

위 내용은 사용자 확인을 처리할 때 Checkbox 및 TextBox 일관성을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!