jQuery에서 일관된 Checkbox 및 TextBox 값을 유지하는 방법: 취소 문제 해결

jQuery 체크박스 변경 및 클릭 이벤트: TextBox 값의 일관성 유지

체크박스와 해당 텍스트박스가 관련된 시나리오에서는 그들의 가치. 그러나 체크박스에 .change() 및 .click() 이벤트를 모두 사용하는 경우 취소 시 텍스트 상자 값이 체크박스 상태와 일치하지 않는 문제가 발생할 수 있습니다.

이 문제는 .change 때문에 발생합니다. ()는 체크박스 상태에 따라 텍스트박스 값을 업데이트하고, .click()은 체크 해제 시 확인을 처리합니다. 사용자가 선택 취소 작업을 취소하면 확인 전에 .change()가 실행되어 텍스트 상자 값이 오래된 상태로 유지됩니다.

불일치 해결

이 문제를 해결하려면 다음 솔루션을 구현할 수 있습니다.

업데이트된 답변:

$(this).is(':checked') 대신 this.checked를 활용하고 확인 논리 이동 .change() 이벤트 내에서 확인이 성공한 경우에만 텍스트 상자 값이 올바르게 업데이트되도록 합니다.

<code class="javascript">$(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);        
    });
});</code>

원래 답변:

또는 $( .change() 이벤트 내의 this).attr("checked", returnVal) 및 $(this).is(':checked')는 동일한 결과를 달성하여 확인이 성공한 경우에만 텍스트 상자 값이 업데이트되도록 합니다.

<code class="javascript">$(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'));        
    });
});</code>

이러한 솔루션은 취소 시 텍스트 상자 값이 확인란 상태와 일치하지 않는 것을 효과적으로 방지하여 사용자 선택을 정확하게 표시합니다.

위 내용은 jQuery에서 일관된 Checkbox 및 TextBox 값을 유지하는 방법: 취소 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!