AJAX와 같은 시나리오에서 클릭 한 후 라디오 버튼을 선택 취소했습니다.

변경 이벤트가 텍스트 필드의 값을 확인하는 함수에 바인딩되어 있고 해당 유효성 검사 오류 메시지를 텍스트 필드 위의 DOM에 연결할 수있는 텍스트 필드가 있습니다. 관련이없는 라디오 버튼 중 하나를 클릭하여 변경 이벤트가 발생하면 클릭 한 라디오 버튼이 포커스를 얻지 만 사용자 및 사용자의 기대에 따라 체크되지 않습니다. 이것이 문제입니다.AJAX와 같은 시나리오에서 클릭 한 후 라디오 버튼을 선택 취소했습니다.

최종 시스템의 유효성 검사가 AJAX를 사용하여 서버 측에서 수행되지만 다음 코드는 AJAX가 문제와 관련이 없음을 보여줍니다. 나는, 나는 당신이 뭘 하려는지 다음과 같은 문제를 조금 미안했다있어

<html> 
<head>                 
<STYLE type="text/css"> 
    .highlighted { color: red; } 
</STYLE> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   
</head>                 
<body>                 

<span id="errors"> 
</span> 

<label for="mytextfield">First, type something in this textfield</> 
<input type="text" id="mytextfield" name="mytextfield"/> 

<p>Second, click on one of these radio buttons</> 

<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</> 
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     //$("#mytextfield").change(validateTextField); 
     $("#mytextfield").change(spliceInTheValidationResultMessage); 
    }); 

    function validateTextField() { 
      $.ajax({ 
       url: 'http://www.google.com', 
       success: function(data) { 
        spliceInTheValidationResultMessage(); 
       } 
      }); 
    } 

    function spliceInTheValidationResultMessage() { 
     $("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted"); 
     alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!"); 
    }; 

</script> 
</body> 
</html>

출처

2010-12-31 user559496

여기서 라디오 버튼 상태를 변경하려고하는 코드는 무엇입니까? 나는 그것을 볼 수 없다. – scunliffe

해당 코드가 없습니다. 페이지를 브라우저에로드하고 라디오 버튼 중 하나를 클릭하면 문제는 라디오 버튼이 선택되었는지 여부가 텍스트 필드에 무엇인가를 입력하지 않은 상태에서 조건부라는 것입니다. – user559496

문제 정의의 추가 개선 : 문제는 라디오 버튼이 선택되었는지 여부는 조건부로 텍스트 필드에 무언가를 바로 입력하지 않은 것입니다. – user559496

,하지만 당신은 어떻게하려고 : 당신이 말해 줄 수

많은 감사 만약 내가 여기에 누락 무엇 이 같은?

<input id="radio1" type="radio" name="binaryquestion" value="Y">Yes</> 
<input id="radio2" type="radio" name="binaryquestion" value="N">No</> 
<script type="text/javascript">$(document).ready(function() { 
    //$("#mytextfield").change(validateTextField); 
    //$("#mytextfield").change(spliceInTheValidationResultMessage); 
    $("#radio1").bind("click", spliceInTheValidationResultMessage, false); 
    $("#radio2").bind("click", spliceInTheValidationResultMessage, false); 
});

라디오 버튼 입력에 id 속성을 추가하고 jQuery bind() 메소드를 사용했습니다. 텍스트 필드의 텍스트를 가져올 수 있도록 validateTextField() 함수를 변경하려고합니다.

출처

2010-12-31 22:30:56 Marlon

텍스트 필드의 값이 변경된 것으로 간주 될 때마다 (즉, 사용자가 텍스트 필드에서 다른 필드로 클릭하거나 탭하면 텍스트 필드의 값이 변경됨), 자바 스크립트는 텍스트 필드 값 유효성 검사를 수행해야합니다 오류가 "오류"범위 내에보고됩니다. 이것은 텍스트 필드의 "onchange"함수를 validateTextField에 바인딩하는 것과 같이 달성됩니다. 텍스트 필드에서 라디오 버튼으로 Tab 키를 누른 상태에서 스페이스 바를 누르면 라디오 상태가 올바르게 작동하지만 라디오 버튼을 "직접"클릭하면 클릭 된 버튼이 체크 된 상태로 유지되지 않습니다. – user559496

저는이 문제가 텍스트 필드의 onchange 이벤트 핸들러 내에서 DOM의 돌연변이와 직접적으로 관련이 있다고 단언하지 못했다는 것을 깨달았습니다. 내 페이지의 라디오 버튼 **을 클릭하면 항상 ** 버튼 주위에 포커스가있는 라디오 버튼 (브라우저가 클릭을 인식했다는 것을 나타내는 점선으로 표시된 부분)이 남았지 만 브라우저의 내용을 클릭 한 것과 같습니다 DOM의 돌연변이에 의해 부분적으로 손상되며 (연결되어있는 메시지 밑의 모든 것을 다시 연관 시킴) – user559496

AJAX와 같은 시나리오에서 클릭 한 후 라디오 버튼을 선택 취소했습니다.

답변

관련 문제